/* Ledger categorical colour ramp
   Added 2 Sept 2026. This is an ADDITION, not a revision: tokens.css stays
   frozen. Import after tokens.css.

   Two colour systems live in this app and they are told apart by SATURATION,
   not by hue.

     SEMANTIC   vivid, 59 to 100 percent saturation. Reserved. Each one means
                exactly one thing, app wide. Defined in tokens.css.
     CATEGORICAL chalky, 28 percent saturation. Means nothing on its own.
                Exists only to tell N things apart.

   A categorical colour sits 31 saturation points below the least saturated
   semantic colour, so even where hues nearly coincide (cove is 3 degrees from
   Assist Cyan, harbour 5 from Action Blue) the two never read as the same
   system. Minimum separation inside the ramp is 34 degrees. Minimum contrast
   on Engine Black is 7.4 to 1.

   WHO DRAWS FROM THIS RAMP
     session tab groups, granular emitters, contributor identity, L and R lane
     pairing, sampler key zones, and any future feature that needs to tell one
     thing from another without saying anything about state.

   HOW TO ASSIGN
     By index, deterministically, no designer in the loop:
       const CAT = ['straw','moss','sage','cove','harbour','iris','orchid','rose'];
       const tone = i => CAT[i % 8];              // tier 1 for the first eight
       const tier = i => i < 8 ? '' : '-deep';    // tier 2 beyond that
     Never pick one by eye, never let a feature invent a ninth hue. If you need
     more than sixteen distinguishable things on one screen, colour is the
     wrong channel and you need shape or grouping instead.
*/

:root{
  --cat-straw: #C4BA97;
  --cat-moss: #A9C497;
  --cat-sage: #97C4A6;
  --cat-cove: #97BDC4;
  --cat-harbour: #97A3C4;
  --cat-iris: #AC97C4;
  --cat-orchid: #C497BE;
  --cat-rose: #C497A3;

  /* tier 2, for indexes 8 to 15. Same hues, lower lightness. */
  --cat-straw-deep: #A1915E;
  --cat-moss-deep: #79A15E;
  --cat-sage-deep: #5EA174;
  --cat-cove-deep: #5E96A1;
  --cat-harbour-deep: #5E70A1;
  --cat-iris-deep: #7D5EA1;
  --cat-orchid-deep: #A15E98;
  --cat-rose-deep: #A15E70;

  /* the washes and hairlines these are used with, so a pill built from the
     ramp looks the same wherever it is built */
  --cat-wash-alpha:  0.14;
  --cat-edge-alpha:  0.34;
}

/* Reference implementation of a categorical pill. Copy the shape, not the
   colour: the colour comes in as --c from the assignment above. */
.cat-pill{
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent);
  border-radius: 14px;
  padding: 5px 13px;
}

/* ============================================================================
   Ledger — discover.css.  THE DISCOVER THREAD'S. RULEBOOK-DISCOVER D1 to D11.

   EVERY RULE IN THIS FILE BEGINS .disc, and a check fails the build if one
   does not. It loads after decided.css, so it can only ADD. It restates no
   token: the custom properties are on .uib and inherited here. Colour spent:
     --lead          the waveform you may hear, and the match figure. The
                     app's hue and the engine's voice (lead.css), so a lit
                     excerpt means the same as a lit waveform in the Librarian.
     --text-4 grey   the part of a file you buy rather than hear.
     --cat-*         a library's identity only, on its poster and its dot.
     --sem-playback  playing, and nothing else.
     --sem-action    the one primary action on a screen.
   ========================================================================== */
.disc{position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  background:var(--bg-deep); color:var(--text); font-family:var(--body)}
.disc .disc-main{flex:1 1 auto; min-height:0; overflow:auto}
/* the body is a flex column too, or the page grows past the window instead of
   scrolling inside it, and anything pinned to the foot falls off the bottom */
.disc .disc-body{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.disc .disc-sk{font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}

/* ---- posters ---------------------------------------------------------------
   Square, a mood ground, the title set big, the maker's mark. Text scales with
   the poster (container units), so one generator serves every size and a
   poster too small to read drops its words rather than shrinking them. */
.disc .disc-po{position:relative; aspect-ratio:1; width:100%; overflow:hidden;
  border-radius:6px; border:1px solid var(--line); background:var(--bg);
  container-type:inline-size; transition:border-color .15s, transform .15s}
.disc .disc-po-art, .disc .disc-po-img{position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:cover}
.disc .disc-po-by{position:absolute; left:7cqw; top:6.5cqw; right:7cqw; font-family:var(--mono);
  font-size:max(7px,4.4cqw); letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,var(--lc) 70%,var(--white))}
.disc .disc-po-t{position:absolute; left:7cqw; right:7cqw; bottom:15cqw; font-family:var(--display);
  font-weight:700; font-size:max(9px,12.5cqw); line-height:.98; letter-spacing:-.02em;
  color:var(--white)}
.disc .disc-po-s{position:absolute; left:7cqw; right:7cqw; bottom:6.5cqw; font-family:var(--mono);
  font-size:max(6.5px,3.7cqw); letter-spacing:.04em; color:color-mix(in srgb,var(--white) 55%,transparent); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
@container (max-width: 150px){
  .disc .disc-po-by, .disc .disc-po-s{display:none}
  .disc .disc-po-t{bottom:8cqw; font-size:15cqw}
}
@container (max-width: 56px){
  .disc .disc-po-t{display:none}
}

/* ---- waveforms: the decided generator, painted two ways -------------------- */
.disc [data-wv]{position:relative; display:block}
.disc .disc-wbase, .disc .disc-wlit{position:absolute; inset:0; display:block}
.disc [data-wv] svg.wv{display:block; width:100%; height:100%}
.disc .disc-wbase .wf{fill:color-mix(in srgb,var(--text-4) 45%,transparent)}
.disc .disc-wbase .wt, .disc .disc-wbase .wb{fill:none; stroke:var(--text-4); stroke-width:1;
  vector-effect:non-scaling-stroke; opacity:.9}
.disc .disc-wlit .wf{fill:color-mix(in srgb,var(--lead) 28%,transparent)}
.disc .disc-wlit .wt{fill:none; stroke:var(--lead); stroke-width:1; vector-effect:non-scaling-stroke}
.disc .disc-wlit .wb{fill:none; stroke:var(--lead-2,var(--lead)); stroke-width:1;
  vector-effect:non-scaling-stroke; opacity:.85}

/* ---- the match figure and the role word ------------------------------------ */
.disc .disc-mt{font-family:var(--mono); font-size:9.5px; color:var(--lead); padding:1px 5px;
  border:1px solid color-mix(in srgb,var(--lead) 40%,transparent); border-radius:3px;
  background:color-mix(in srgb,var(--lead) 8%,transparent); justify-self:end}
.disc .disc-role{font-family:var(--mono); font-size:9px; letter-spacing:.04em; color:var(--text-2);
  padding:1px 5px; border:1px dashed var(--line-2); border-radius:3px}

/* ---- shelf ----------------------------------------------------------------- */
.disc .disc-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 14px;
  padding:14px 18px 18px}
.disc .disc-tile{display:flex; flex-direction:column; cursor:pointer; min-width:0}
.disc .disc-tile:hover .disc-po, .disc .disc-lk:hover .disc-po, .disc .disc-cc:hover .disc-po{
  border-color:var(--line-2); transform:translateY(-1px)}
.disc .disc-tile.disc-sel .disc-po, .disc .disc-lk.disc-sel .disc-po, .disc .disc-cc.disc-sel .disc-po{
  border-color:color-mix(in srgb,var(--lc) 70%,transparent)}
.disc .disc-tt{margin-top:8px; font-size:12.5px; font-weight:500; color:var(--white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.disc .disc-tb{font-size:11px; color:var(--text-3)}
.disc .disc-tm{display:flex; justify-content:space-between; align-items:center; margin-top:5px;
  font-family:var(--mono); font-size:9.5px; color:var(--text-3)}

/* ---- sprout ---------------------------------------------------------------- */
.disc .disc-hero{display:grid; grid-template-columns:212px minmax(0,1fr); gap:18px; padding:16px 18px 4px}
.disc .disc-hb{display:flex; flex-direction:column; gap:12px; min-width:0}
.disc .disc-b{height:28px; padding:0 12px; border-radius:6px; border:1px solid var(--line-2);
  background:var(--panel-raised); color:var(--white); font:500 11.5px var(--body); cursor:pointer}
.disc .disc-b.disc-prim{background:var(--sem-action); border-color:var(--sem-action)}
.disc .disc-bn{grid-column:1 / -1; margin:0; font-size:11px; color:var(--text-3)}
.disc .disc-sh{display:flex; align-items:baseline; gap:10px; padding:16px 18px 6px}
.disc .disc-sht{font-family:var(--display); font-size:12.5px; color:var(--white)}
.disc .disc-shn{font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--text-4)}
.disc .disc-rows{padding:0 18px}
.disc .disc-comps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0 18px}
.disc .disc-cc{display:grid; grid-template-columns:56px minmax(0,1fr); grid-template-rows:auto auto auto 1fr;
  column-gap:10px; row-gap:1px; padding:8px; background:var(--panel); border:1px solid var(--line);
  border-radius:6px; cursor:pointer}
.disc .disc-cc .disc-po{grid-row:1 / 5}
.disc .disc-cr{font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-2)}
.disc .disc-cn{font-size:11.5px; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.disc .disc-cb{font-size:10.5px; color:var(--text-3); white-space:pre; overflow:hidden; text-overflow:ellipsis}
.disc .disc-cc .disc-th{align-self:end; height:18px; margin-top:4px}
.disc .disc-like{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0 18px 18px}
.disc .disc-lk{display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center;
  gap:9px; cursor:pointer; min-width:0}
.disc .disc-lk .disc-tt{margin:0; font-size:11.5px}

/* ---- rows, shared by sprout and contents ---------------------------------- */
.disc .disc-rw{display:grid; grid-template-columns:112px minmax(0,1.15fr) minmax(0,1.5fr) 30px 44px 42px 26px;
  align-items:center; gap:12px; height:30px; padding:0 8px; border-bottom:1px solid var(--line);
  cursor:pointer}
.disc .disc-rw:hover{background:var(--panel)}
.disc .disc-rw.disc-sel{background:var(--panel-raised); box-shadow:inset 2px 0 var(--lead)}
.disc .disc-th{height:20px}
.disc .disc-th[data-access="request"]{background:repeating-linear-gradient(135deg,transparent 0 4px,
  color-mix(in srgb,var(--text-4) 22%,transparent) 4px 5px); border-radius:3px}
.disc .disc-rn{font-size:12px; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.disc .disc-rd{font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.disc .disc-rc{font-family:var(--mono); font-size:9.5px; color:var(--text-3)}

/* ---- contents -------------------------------------------------------------- */
.disc .disc-grp{display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:14px 18px;
  border-bottom:1px solid var(--line)}
.disc .disc-gp{display:flex; flex-direction:column; gap:2px}
.disc .disc-gt{margin-top:7px; font-family:var(--display); font-size:12.5px; color:var(--white)}
.disc .disc-gm{margin:8px 8px 0; padding:3px 8px; font-family:var(--mono); font-size:9.5px; color:var(--text-2);
  background:none; border:1px solid var(--line-2); border-radius:4px; cursor:pointer}
.disc .disc-gm:hover{color:var(--white); border-color:var(--text-4)}

/* ============================================================================
   D2 · the review round. Tomas's eight notes on b31.
   ========================================================================== */
.disc [hidden]{display:none !important}
.disc .disc-co{margin-left:auto; flex:0 0 auto}
.disc .disc-cob{display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 14px;
  border-radius:15px; border:0; background:var(--sem-action); color:var(--white);
  font:500 12px var(--body); cursor:pointer;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sem-action) 22%,transparent)}
.disc .disc-sug{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:0 18px 10px;
  border-bottom:1px solid var(--line)}
.disc .disc-sug .sugs{display:flex; flex-wrap:wrap; gap:6px}
.disc .disc-also{display:flex; align-items:center; flex-wrap:wrap; gap:6px}
.disc .disc-alsob{height:22px; padding:0 9px; border-radius:11px; border:1px dashed var(--line-2);
  background:none; color:var(--text-2); font:11px var(--body); cursor:pointer}
.disc .disc-alsob:hover{color:var(--white); border-color:var(--text-3)}
.disc .disc-illu{font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-4); border:1px solid var(--line); border-radius:3px; padding:1px 5px}

/* ---- adding: a little more visible than play (note 4) ------------------------ */
.disc .disc-add{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:26px; padding:0 11px; border-radius:13px; cursor:pointer; font:500 11.5px var(--body);
  color:var(--white); background:color-mix(in srgb,var(--white) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--white) 38%,transparent)}
.disc .disc-add:hover{background:color-mix(in srgb,var(--white) 14%,transparent)}
.disc .disc-add.disc-in{color:var(--sem-action); border-color:color-mix(in srgb,var(--sem-action) 70%,transparent);
  background:color-mix(in srgb,var(--sem-action) 12%,transparent)}
.disc .disc-add.disc-own{color:var(--text-2); border-color:var(--line-2); background:none; cursor:default}
.disc .disc-rw .disc-add{width:24px; height:24px; padding:0; border-radius:12px}
.disc .disc-rt{font-family:var(--mono); font-size:9.5px; color:var(--text-3)}

/* ---- doors to the product page (note 6) ---------------------------------------- */
.disc [data-go]{cursor:pointer}
.disc .disc-see{margin-left:auto; padding:3px 9px; border-radius:4px; border:1px solid var(--line-2);
  background:none; color:var(--text-2); font:11px var(--body); cursor:pointer}
.disc .disc-see:hover{color:var(--white); border-color:var(--text-4)}
.disc .disc-tw{position:relative}
.disc .disc-tp{position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:15px;
  display:grid; place-items:center; padding:0; cursor:pointer; color:var(--white);
  background:color-mix(in srgb,var(--bg) 65%,transparent);
  border:1px solid color-mix(in srgb,var(--white) 35%,transparent); opacity:.85}
.disc .disc-tile:hover .disc-tp{opacity:1}
.disc .disc-empty{padding:28px 18px; font-size:12px; color:var(--text-3)}

/* ---- the library product page (note 6, block 22) ------------------------------ */
.disc .disc-crumb{display:flex; align-items:center; gap:10px; padding:12px 18px 0}
.disc .disc-back{display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px 0 5px;
  border-radius:4px; border:1px solid var(--line-2); background:none; color:var(--text-2);
  font:11px var(--body); cursor:pointer}
.disc .disc-back:hover{color:var(--white)}
.disc .disc-pi{display:flex; flex-direction:column; min-width:0}
.disc .disc-ptl{margin:4px 0 6px; font-family:var(--display); font-weight:700; font-size:28px;
  letter-spacing:-.02em; color:var(--white)}
.disc .disc-tags{display:flex; flex-wrap:wrap; gap:5px}
.disc .disc-tag{font-family:var(--mono); font-size:9.5px; color:var(--text-2); padding:2px 8px;
  border:1px solid var(--line-2); border-radius:10px}
.disc .disc-facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:14px}
.disc .disc-f{display:flex; flex-direction:column; gap:3px; min-width:0}
.disc .disc-fk{font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-4)}
.disc .disc-fv{font-size:12px; color:var(--white)}
.disc .disc-unset{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--text-4)}
.disc .disc-pbuy{display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin-top:16px; padding:10px 12px;
  background:var(--panel); border:1px solid var(--line); border-radius:6px}
.disc .disc-pbl{display:flex; gap:34px; flex:0 0 auto}
.disc .disc-pbuy .disc-bn{grid-column:auto; flex:1 1 220px}
.disc .disc-pcols{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px; padding:0 18px 18px}
.disc .disc-pcols .disc-sh{padding-left:0; padding-right:0}
.disc .disc-about p{margin:0 0 8px; font-size:12.5px; line-height:1.55; color:var(--text-2); max-width:70ch}
.disc .disc-facts2{margin-top:8px}
.disc .disc-cg{display:grid; grid-template-columns:34px 92px minmax(0,1fr); gap:10px; padding:6px 0;
  border-bottom:1px solid var(--line); font-size:12px; color:var(--text-2)}
.disc .disc-cv{font-family:var(--mono); font-size:10px; color:var(--white)}
.disc .disc-cd{font-family:var(--mono); font-size:10px; color:var(--text-3)}

/* ---- buying: the first time sheet, and the notification (note 5) ----------------- */
.disc .disc-sheet{position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:color-mix(in srgb,var(--bg) 70%,transparent)}
.disc .disc-shc{width:380px; padding:18px; border-radius:10px; background:var(--panel-raised);
  border:1px solid var(--line-2)}
.disc .disc-shc b{font-family:var(--display); font-size:14px; color:var(--white)}
.disc .disc-shc p{margin:8px 0 14px; font-size:12px; line-height:1.5; color:var(--text-2)}
.disc .disc-shb{display:flex; flex-wrap:wrap; gap:8px}
.disc .disc-b.disc-ghost{background:none; border-color:transparent; color:var(--text-3)}
.disc .disc-toast{position:absolute; top:10px; right:18px; z-index:4; display:flex; align-items:center; gap:10px;
  max-width:560px; padding:8px 10px 8px 12px; border-radius:8px; background:var(--panel-raised);
  border:1px solid color-mix(in srgb,var(--sem-playback) 45%,transparent); font-size:12px; color:var(--text-2)}
.disc .disc-toast b{color:var(--white); font-weight:500}
.disc .disc-tk{color:var(--sem-playback); display:grid; place-items:center}

/* ---- request full sound, and the full listen (note 10) ------------------------ */
.disc .disc-rq{display:inline-flex; align-items:center; gap:4px; flex:0 0 auto}
.disc .disc-rqb{height:24px; padding:0 10px; border-radius:12px; cursor:pointer; font:500 11px var(--body);
  color:var(--text-2); background:none; border:1px dashed color-mix(in srgb,var(--white) 30%,transparent)}
.disc .disc-rqb:hover{color:var(--white); border-color:color-mix(in srgb,var(--white) 55%,transparent)}
.disc .disc-rqb[disabled]{opacity:.5; cursor:default}
.disc .disc-eye{position:relative; display:grid; place-items:center; width:22px; height:22px;
  border-radius:11px; color:var(--text-3); cursor:help; outline:none}
.disc .disc-eye:hover, .disc .disc-eye:focus{color:var(--white)}
.disc .disc-tip{position:absolute; right:-6px; bottom:28px; z-index:6; width:280px; padding:10px 12px;
  border-radius:8px; background:var(--panel-raised); border:1px solid var(--line-2);
  font:11.5px/1.5 var(--body); color:var(--text-2); text-align:left;
  opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .12s, transform .12s}
.disc .disc-tip b{display:block; margin-bottom:3px; color:var(--white); font-weight:500}
.disc .disc-tip i{display:block; margin-top:6px; font:normal 9px var(--mono); letter-spacing:.06em; color:var(--text-4)}
.disc .disc-eye:hover .disc-tip, .disc .disc-eye:focus .disc-tip{opacity:1; visibility:visible; transform:none}
.disc .disc-fl{flex:0 0 auto; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lead); padding:2px 7px; border-radius:10px;
  border:1px dashed color-mix(in srgb,var(--lead) 60%,transparent)}
/* A FULL LISTEN IS NOT OWNING. Both are lit end to end; the full listen's
   outline is dashed and its fill thinner, because only an owned sound can be
   spotted, and the waveform is where that difference has to be seen. */
.disc [data-access="unlocked"] .disc-wlit .wf{fill:color-mix(in srgb,var(--lead) 14%,transparent)}
.disc [data-access="unlocked"] .disc-wlit .wt, .disc [data-access="unlocked"] .disc-wlit .wb{stroke-dasharray:3 3}

/* ---- the checkout (note 11) ----------------------------------------------------- */
.disc .disc-cnt{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; font:600 10px var(--mono); background:color-mix(in srgb,var(--white) 22%,transparent)}
.disc .disc-order{width:460px; max-width:calc(100% - 36px); max-height:calc(100% - 36px); overflow:auto;
  border-radius:10px; background:var(--panel-raised); border:1px solid var(--line-2)}
.disc .disc-oh{display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid var(--line-2)}
.disc .disc-oh b{font-family:var(--display); font-size:14px; color:var(--white)}
.disc .disc-olist{padding:6px 14px}
.disc .disc-og{padding:6px 0; border-bottom:1px solid var(--line)}
.disc .disc-ogh{display:flex; align-items:center; gap:7px; padding:4px 0; font-size:12px}
.disc .disc-ogh i{width:7px; height:7px; border-radius:4px; background:var(--lc)}
.disc .disc-ogh b{color:var(--white); font-weight:500}
.disc .disc-ogh span{color:var(--text-3)}
.disc .disc-ol{display:flex; justify-content:space-between; gap:12px; padding:3px 0 3px 14px;
  font-size:11.5px; color:var(--text-2)}
.disc .disc-ocr{color:var(--text-3); font-size:11px}
.disc .disc-tot{padding:8px 14px; border-bottom:1px solid var(--line-2)}
.disc .disc-tot div{display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:11.5px; color:var(--text-2)}
.disc .disc-tt2{color:var(--white) !important; font-weight:500}
.disc .disc-card{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:10px 14px;
  border-bottom:1px solid var(--line-2); font-size:11.5px; color:var(--text-2)}
.disc .disc-cdn{flex:1 1 240px; color:var(--text-3)}
.disc .disc-chk{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2); cursor:pointer}
.disc .disc-chk input{accent-color:var(--white); margin:0}
.disc .disc-ofoot{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px}
.disc .disc-complete{height:32px; padding:0 16px; border-radius:16px; border:0; cursor:pointer;
  font:500 12.5px var(--body); background:var(--sem-action); color:var(--white)}
.disc .disc-complete[disabled]{opacity:.45; cursor:default}
.disc .disc-ofoot .disc-ghost{margin-left:auto}

/* ---- the button's colour, three ways for UI & Logic (note 12) ----------------------
   Only colours that exist. Amber already means lock and update; white spends
   no hue. The unsettled accent is the real candidate and is not drawn. */
.disc[data-cobc="amber"] .disc-cob, .disc[data-cobc="amber"] .disc-complete{background:var(--sem-lock); color:var(--bg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sem-lock) 22%,transparent)}
.disc[data-cobc="white"] .disc-cob, .disc[data-cobc="white"] .disc-complete{background:var(--white); color:var(--bg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--white) 16%,transparent)}
.disc[data-cobc="amber"] .disc-cnt, .disc[data-cobc="white"] .disc-cnt{background:color-mix(in srgb,var(--bg) 18%,transparent)}
.disc.disc-swatch{flex-direction:row; align-items:center; gap:14px; margin:8px 0; padding:12px 16px;
  background:var(--bg); border:1px solid var(--line); border-radius:6px}
.disc.disc-swatch .disc-co{margin-left:0}
.disc .disc-swl{width:54px; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2)}
.disc .disc-swn{font-size:11.5px; color:var(--text-3)}

/* ============================================================================
   D4 · the player left. W1 rule 2: the mode swaps the list, the player stays,
   so every rule that drew a waveform pane, a transport, a floating shelf or an
   inline copy at the row has gone with it. What is left is list furniture.

   THE ACCESS RAIL IS NOT DRAWN HERE ANY MORE EITHER, except on the row
   thumbnails. Lit against grey on the sound you have loaded belongs to the
   app's wave pane, which is App beta's surface: handover H8.
   ========================================================================== */
.disc .disc-hb{display:flex; flex-direction:column; gap:8px; min-width:0}
.disc .disc-hb .disc-rw{border-bottom:0}
.disc .disc-th[data-access="owned"], .disc .disc-th[data-access="unlocked"]{opacity:1}

.disc .disc-sug{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:8px 18px 12px}

/* ============================================================================
   D5 · Discover opens full view, and gets its own player below.
   ========================================================================== */

/* ---- the search row, Discover's own (no tab row: those are the Librarian's) -- */
.disc .disc-q{display:flex; align-items:center; gap:12px; padding:10px 18px 8px}
.disc .disc-qf{flex:1 1 auto; max-width:440px; height:var(--ctl,30px); display:flex;
  align-items:center; gap:8px; padding:0 10px; background:var(--panel);
  border:1px solid var(--line-2); border-radius:6px; color:var(--text-3)}
.disc .disc-qslot{flex:1 1 auto; min-width:0; display:flex}
.disc .disc-qslot .qrow{flex:1 1 auto; min-width:0}
.disc .disc-qn{font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--text-3)}
.disc .disc-refine{display:flex; flex-wrap:wrap; gap:6px; padding:0 18px 10px;
  border-bottom:1px solid var(--line)}
.disc .disc-seed{display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 6px 0 10px;
  border:1px solid color-mix(in srgb,var(--lead) 45%,transparent);
  background:color-mix(in srgb,var(--lead) 8%,transparent); border-radius:14px;
  font-family:var(--mono); font-size:11px; color:var(--white)}
.disc .disc-sx{display:inline-grid; place-items:center; width:18px; height:18px;
  border-radius:9px; color:var(--text-3); cursor:pointer}
.disc .disc-sx:hover{color:var(--white); background:var(--panel-raised)}

/* ---- THE LIBRARIES GET THE WINDOW. The list is what stretches; the player is
   absent until a sample is demoed, and then it takes only what it needs. ---- */
.disc .disc-body{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.disc .disc-slot{flex:0 0 auto}

/* ---- the player, D5: SURF's own generators, with parts withheld ------------- */
.disc .disc-play{border-top:1px solid var(--line-2); background:var(--panel)}
.disc .disc-phead{display:flex; align-items:center; gap:10px; padding:7px 14px 6px; min-width:0}
.disc .disc-pnm{font-size:12px; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.disc .disc-plib{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--text-2);
  white-space:nowrap; cursor:pointer}
.disc .disc-plib i{width:7px; height:7px; border-radius:4px; background:var(--lc)}
.disc .disc-plib:hover{color:var(--white); text-decoration:underline; text-underline-offset:3px}
.disc .disc-phead .disc-add{margin-left:auto}
.disc .disc-pclose{width:22px; height:22px; display:grid; place-items:center; padding:0; border:0;
  border-radius:11px; background:none; color:var(--text-3); font-size:15px; cursor:pointer}
.disc .disc-pclose:hover{color:var(--white); background:var(--panel-raised)}
/* THE PANE IS SHORTER HERE THAN IN THE WORK WINDOW. Nothing is being edited in
   a shop, so the pane is for hearing where the excerpt sits, not for placing
   flags in it; the libraries keep the height that buys. */
.disc .disc-pane{position:relative}
.disc .disc-pane .wp{height:132px}
.disc .disc-pane .wp > svg.wv{position:absolute; inset:0; width:100%; height:100%; display:block}
.disc .disc-pane .wf{fill:color-mix(in srgb,var(--lead) 22%,transparent)}
.disc .disc-pane .wt{stroke:var(--lead); stroke-width:1; fill:none; opacity:.85}
.disc .disc-pane .wb{stroke:var(--lead-2,var(--lead)); stroke-width:1; fill:none; opacity:.8}
.disc .disc-mask{position:absolute; top:0; bottom:0; z-index:4; pointer-events:none;
  background:color-mix(in srgb,var(--bg) 72%,transparent)}
.disc .disc-mask[data-req]{background:repeating-linear-gradient(135deg,transparent 0 6px,
  color-mix(in srgb,var(--bg) 82%,transparent) 6px 7px),color-mix(in srgb,var(--bg) 62%,transparent)}
.disc .disc-edge{position:absolute; top:0; bottom:0; width:1px; z-index:5; pointer-events:none;
  background:color-mix(in srgb,var(--lead) 60%,transparent)}
.disc .disc-play[data-access="owned"] .disc-mask, .disc .disc-play[data-access="unlocked"] .disc-mask{display:none}

/* WHAT THE SHOP'S PLAYER WITHHOLDS, and why each one.
   Send: spotting an unowned sound into a session is what buying is for.
   FX: the rack shapes a sound you own. Rec: a shop does not record.
   map: MIDI mapping belongs to a sound in your library. */
.disc .disc-tport .t9b.send, .disc .disc-tport .t9b.fx,
.disc .disc-tport .t9b.rec, .disc .disc-tport .t9b.map{display:none}
.disc .disc-tport{border-top:1px solid var(--line)}

/* ============================================================================
   D6 · the artwork is a background, and Ledger sets the type.
   ========================================================================== */

/* FIRST, A RULE D4 KILLED BY ACCIDENT, PUT BACK. D4's sweep removed every rule
   whose selector contained a player class, matched as a substring, and
   .disc-ph-hero contains .disc-ph. The product page has been laying itself out
   on nothing since. Named here rather than quietly restored, because a sweep
   that matches substrings will do it again to something else. */
.disc .disc-ph-hero{display:block; padding:14px 18px 6px}

/* A NARROW BANNER, NOT A BIG SQUARE. Full width, one band, so the page opens
   on the library rather than on a picture of it. The asset is 3 to 1 and is
   sliced, so one definition fills this, a tile and a chip. */
.disc .disc-band{margin:0 0 14px; border-radius:6px; overflow:hidden}
.disc .disc-band .disc-po{aspect-ratio:auto; height:132px; border-radius:0; margin:0; width:100%}
.disc .disc-po.disc-banner-art .disc-po-by,
.disc .disc-po.disc-banner-art .disc-po-t,
.disc .disc-po.disc-banner-art .disc-po-s{left:22px; right:22px}
.disc .disc-po.disc-banner-art .disc-po-by{top:auto; bottom:64px; font-size:9.5px}
.disc .disc-po.disc-banner-art .disc-po-t{bottom:30px; font-size:30px; line-height:1}
.disc .disc-po.disc-banner-art .disc-po-s{bottom:14px; font-size:9.5px}

/* the tile is 3:2 now, so its type sits on the same terms as the banner's */
.disc .disc-tile .disc-po-t{bottom:13cqw; font-size:max(9px,10.5cqw)}

/* ---- the stock set, shown as a set (bench block 31f) ------------------------ */
.disc-stock{display:grid; gap:16px}
.disc-stock .disc-srow{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px}
.disc-stock .disc-scell{min-width:0}
.disc-stock .disc-slabel{margin-top:5px; font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.disc-stock .disc-sh2{font-family:var(--display); font-size:12.5px; color:var(--white); margin:6px 0 0}

/* ============================================================================
   D7 · square everywhere but the banner, and the player slides.
   ========================================================================== */

/* THE SQUARE COMES BACK (Tomas: publishers already have square covers). D6
   moved the tile to 3:2 so one asset could crop both ways; D7 says there are
   two assets, so the tile is square again and only the banner is wide. */
.disc .disc-tile .disc-po-t{bottom:15cqw; font-size:max(9px,12.5cqw)}

/* ---- the slide, D7 -----------------------------------------------------------
   A grid of one row, 0fr shut and 1fr open, which the browser transitions, so
   the panel grows up from the bottom edge instead of appearing at full height.
   260ms is Discover's own number until motion.css has a drawer token (H14). */
.disc .disc-slot{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 260ms cubic-bezier(.2,.8,.2,1)}
.disc .disc-slot.disc-open{grid-template-rows:1fr}
.disc .disc-slot > .disc-play{min-height:0; overflow:hidden;
  transform:translateY(8px); opacity:.6;
  transition:transform 260ms cubic-bezier(.2,.8,.2,1), opacity 180ms linear}
.disc .disc-slot.disc-open > .disc-play{transform:none; opacity:1}
@media (prefers-reduced-motion: reduce){
  .disc .disc-slot, .disc .disc-slot > .disc-play{transition:none}
}
/* the way out is the decided chevron, pointing down (3.110, 3.111) */
.disc .disc-pclose{width:24px; height:22px}
.disc .disc-pclose svg{width:12px; height:12px; transform:rotate(180deg)}

/* the square poster sits beside the summary on the library page, so what the
   shelf shows and what the banner shows are visible together */
.disc .disc-pgrid{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:start}
.disc .disc-ppo{min-width:0}
.disc .disc-pgrid .disc-pln{margin:0}

/* ============================================================================
   D8 · the caption says it once, and the count sits opposite the name.
   ========================================================================== */

/* TWO ROWS, EACH WITH ONE THING ON THE LEFT AND ONE ON THE RIGHT. The tile was
   name, maker, then a row of count and match: three rows saying what two can,
   with the name and the maker also drawn on the picture above them. */
.disc .disc-tcap{display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:10px; row-gap:1px; align-items:baseline; margin-top:8px}
.disc .disc-tcap > *{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.disc .disc-tcap .disc-tt{margin-top:0}
.disc .disc-tn{font-family:var(--mono); font-size:9.5px; color:var(--text-3); justify-self:end}
.disc .disc-tcap .disc-mt, .disc .disc-tcap .disc-role{justify-self:end}
.disc .disc-gp .disc-tcap{margin-top:7px}

/* the stock sheet shows a square the way a tile does: artwork, then a caption */
.disc-stock .disc-scap{display:flex; justify-content:space-between; gap:8px; margin-top:5px;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase}
.disc-stock .disc-scap span:first-child{color:var(--white)}
.disc-stock .disc-scap span:last-child{color:var(--text-4)}

/* ============================================================================
   D9 · the title is on the picture; the caption says only what it cannot.
   ========================================================================== */

/* WHERE THE WORDS DIVIDE. Artwork wider than 150px carries the name, because it
   can be read there. Narrower than that the container query drops it and the
   text beside the picture does the naming instead. One rule, one threshold,
   and nothing says the same thing twice on either side of it. */
/* BY SIZE, NOT BY MEASUREMENT. The container query that hides the maker and
   the spec did not reliably hide the name as well, and a rule this load
   bearing should not depend on working out which container answered. The sizes
   are named where the artwork is asked for, so they are what the rule reads:
   md, lg and the banner carry the name, sm and xs do not and the text beside
   them names the library instead. */
.disc .disc-po.disc-sm .disc-po-t, .disc .disc-po.disc-xs .disc-po-t{display:none}
.disc .disc-tcap{grid-template-columns:auto minmax(0,1fr); margin-top:7px}
.disc .disc-tcap .disc-tn{justify-self:start}
.disc-stock .disc-scap{justify-content:flex-start}

/* the sprout's hero was sized for the player D5 took out of it, so its lg
   poster had been rendering smaller than an md one on the shelf */
.disc .disc-hero{display:grid; grid-template-columns:232px minmax(0,1fr); gap:18px; align-items:start}
.disc .disc-hero > .disc-po{width:232px}

/* ============================================================================
   D10 · the numbers on the picture, drawn three ways to be compared.
   ========================================================================== */

/* THE SCRIM IS WHAT MAKES ANY OF THIS SAFE. Type over a stock ground reads
   because the ground is ours; type over a publisher's uploaded cover reads on
   eight libraries and disappears on the ninth. A gradient from the foot gives
   every word its own backing without hiding the picture. */
.disc .disc-po-scrim{position:absolute; left:0; right:0; bottom:0; height:62%;
  background:linear-gradient(180deg, transparent, color-mix(in srgb,var(--bg) 82%,transparent));
  pointer-events:none}
.disc .disc-po.disc-sm .disc-po-scrim, .disc .disc-po.disc-xs .disc-po-scrim{display:none}
.disc .disc-po-by, .disc .disc-po-t, .disc .disc-po-s, .disc .disc-po-st{z-index:1}

/* the numbers, in the slot the spec line uses: count left, match right */
.disc .disc-po-st{position:absolute; left:7cqw; right:7cqw; bottom:6.5cqw;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--mono); font-size:max(7px,3.9cqw); letter-spacing:.04em;
  color:color-mix(in srgb,var(--white) 62%,transparent)}
.disc .disc-po.disc-po-stat .disc-po-t{bottom:15cqw}
.disc .disc-po-st .disc-mt, .disc .disc-po-st .disc-role{font-size:max(7px,3.9cqw); padding:1px 4px}
.disc .disc-tcap.disc-one{grid-template-columns:minmax(0,1fr)}
.disc .disc-tcap.disc-one > *{justify-self:end}

/* the comparison sheet draws grids at the width the shelf gives them */
.disc-stock .disc-sgrid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:0 0 4px}

/* the play button moves out of the way when the numbers are on the picture */
.disc .disc-tw:has(.disc-po-stat) .disc-tp{top:8px; bottom:auto}

/* ============================================================================
   D11 · the library page reads top down, and the cramped places are fixed.
   ========================================================================== */

/* WHAT IT IS, AND HOW IT WAS MADE, SIDE BY SIDE. The description holds the
   measure it wants and the recording facts run down the right of it, which is
   where Tomas asked for them and where they stop being a footnote. */
/* THREE TRACKS, NOT TWO. The text is capped at a readable measure, the gap
   flexes, and the facts sit against the right edge where they were asked for.
   A two track grid put the cap inside a 1fr column and left the hole between
   them, which is the empty space Tomas saw. */
.disc .disc-pdesc{display:grid; grid-template-columns:minmax(0,72ch) minmax(24px,1fr) 250px;
  gap:0 28px; padding:16px 18px 6px; align-items:start}
.disc .disc-pd-l{min-width:0; grid-column:1}
.disc .disc-pd-r{grid-column:3}
.disc .disc-pd-r{display:flex; flex-direction:column; gap:12px; padding-left:22px;
  border-left:1px solid var(--line)}
.disc .disc-pdesc .disc-pln{margin:0 0 10px; font-size:13.5px; line-height:1.5; color:var(--white)}
.disc .disc-pdesc .disc-about p{margin:0 0 9px; font-size:12.5px; line-height:1.6; color:var(--text-2)}
.disc .disc-pdesc .disc-tags{margin-top:12px}
.disc .disc-pd-r .disc-f{gap:2px}
.disc .disc-pd-r .disc-fv{font-size:11.5px; line-height:1.4; white-space:normal}

/* the numbers a buyer checks are their own row, not part of the description */
.disc .disc-facts{padding:14px 18px 0; margin-top:4px; gap:10px 34px}
.disc .disc-pbuy{margin:14px 18px 0}
.disc .disc-pcols{padding-top:6px}

/* the group header was cramped: at 120px a two column caption has no room,
   so it stacks there and keeps the two column shape only on the shelf */
.disc .disc-gp .disc-tcap{display:flex; flex-direction:column; gap:1px; margin-top:8px}
.disc .disc-gp .disc-tcap > *{justify-self:start; text-align:left}
.disc .disc-gp .disc-gt{font-family:var(--display); font-size:12.5px; color:var(--white); cursor:pointer}

/* the sprout's hero had a 232px square against one row, which left a hole the
   size of the square. It is a row now, and the block is post beta anyway. */
.disc .disc-hero{grid-template-columns:160px minmax(0,1fr); align-items:center; gap:16px}
.disc .disc-hero > .disc-po{width:160px}


/* ============================================================================
   D13 · the frame round the banner, the sprout's banner, and the group square
   ========================================================================== */

/* THE BANNER WAS STUCK TO THE CRUMB AND STANDING OFF FROM THE PROSE, which is
   the wrong way round: the picture belongs to the page, not to the button above
   it. It takes the page's own 18px gutter now, an even band above and below,
   and the description starts straight after it rather than adding a second gap
   on top of the banner's own. */
.disc .disc-band{margin:13px 18px 13px; border-radius:6px; overflow:hidden}
.disc .disc-pdesc{padding-top:2px}

/* The sprout's banner is the library, full width, with the sounds under it: no
   square in the middle of the page with text beside it (D13). */
.disc .disc-sban{margin-bottom:10px}
.disc .disc-sdesc{margin:0 18px 12px; font-size:12.5px; line-height:1.55; color:var(--text-2)}
.disc .disc-hb{padding:0 18px}

/* The contents group square carries its own name and count (D13), so the
   caption under it is one line and the square is big enough for type. */
.disc .disc-gp .disc-tcap{margin-top:7px}
.disc .disc-gp .disc-tb{cursor:pointer}
.disc .disc-gp .disc-tb:hover{color:var(--white)}

/* D13: the description, the numbers and the recording facts, three columns
   across one band, so the page has no hole in the middle of it. */
.disc .disc-pdesc{grid-template-columns:minmax(0,62ch) minmax(150px,1fr) 250px; gap:0 30px}
.disc .disc-pd-m{grid-column:2; display:flex; flex-direction:column; gap:12px;
  padding-left:22px; border-left:1px solid var(--line)}
.disc .disc-pd-r{grid-column:3}


/* ============================================================================
   D14 · one gutter, and a class name is still a global namespace
   ========================================================================== */

/* THE BANNER'S PICTURE WAS INSET INSIDE ITS OWN BAND, by exactly the band's own
   margin, and the reason is 3.118 with Discover's fingerprints on it. The band
   was .disc-banner (D6) and the poster's size class is "disc-" plus its size,
   which for a banner is ALSO .disc-banner. One rule, two elements, and the
   picture took the wrapper's 18px margin a second time. The band is .disc-band
   now; the poster keeps .disc-banner-art, which is what the banner rules were
   always written against. */
.disc .disc-band{margin:13px 18px 13px; border-radius:6px; overflow:hidden}
.disc .disc-band > .disc-po{margin:0; width:100%; border-radius:0}

/* ONE GUTTER. The rows carried 8px of their own inside a container already on
   the page's 18px, so every row's content sat five pixels right of every
   heading, every banner and every paragraph above it. The row keeps its full
   width hover band and starts where everything else starts. */
.disc .disc-rw{padding:0}
.disc .disc-rw:hover{box-shadow:0 0 0 8px var(--panel)}
.disc .disc-gm{margin-left:0}

/* The contents square states its library at the TOP, level with the first row
   of its own list, because here the picture is a group header beside a list
   rather than a tile in a grid. The scrim turns over with it. */
.disc .disc-po.disc-po-top .disc-po-by{top:7cqw; bottom:auto}
.disc .disc-po.disc-po-top .disc-po-t{top:16cqw; bottom:auto}
.disc .disc-po.disc-po-top .disc-po-st{top:auto; bottom:6.5cqw}
.disc .disc-po.disc-po-top .disc-po-scrim{top:0; bottom:auto; height:70%;
  background:linear-gradient(0deg, transparent, color-mix(in srgb,var(--bg) 82%,transparent))}

/* The maker is unreadable at 75px and legible as text under the square, so the
   contents square draws the name and the count and leaves the maker to the
   caption. One statement each, D14. */
.disc .disc-po.disc-po-top .disc-po-by{display:none}


/* ============================================================================
   D15 · the foot of the sprout
   ========================================================================== */

/* MORE LIKE IT IS THE SHELF, at the size a tail deserves. Four across at the
   shelf's own track width made the thing you might look at next bigger than
   the library you are in, which is the wrong way round: it is the same
   treatment, subordinate, six across. */
.disc .disc-like{grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding-top:4px}


/* ============================================================================
   D16 · type on artwork has to survive every ground on offer
   ========================================================================== */

/* THE MAKER LINE WAS MADE OUT OF THE GROUND IT SAT ON. 70% of --lc mixed
   toward white was readable on nine dark grounds and nearly invisible the
   moment D13 made nine light ones, because the type was being tinted toward
   the exact thing behind it. Ledger's type on artwork is white with an alpha,
   always, whatever the picture: it is the one colour that is lighter than
   every ground the system allows. */
.disc .disc-po-by{color:color-mix(in srgb,var(--white) 82%,transparent)}
.disc .disc-po-s{color:color-mix(in srgb,var(--white) 72%,transparent)}
.disc .disc-po-st{color:color-mix(in srgb,var(--white) 78%,transparent)}

/* AND THE BACKING RUNS AT BOTH ENDS. The scrim covered the bottom 62%, which
   is where the name and the numbers are, and the maker at the top had nothing
   behind it at all. One element, two gradients, so there is still one rule for
   the backing and it reaches everything Ledger draws. */
.disc .disc-po-scrim{top:0; height:auto;
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 72%,transparent) 0%,
      transparent 30%,
      transparent 44%,
      color-mix(in srgb,var(--bg) 88%,transparent) 100%)}
.disc .disc-po.disc-po-top .disc-po-scrim{top:0; bottom:0; height:auto;
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 88%,transparent) 0%,
      transparent 56%,
      transparent 68%,
      color-mix(in srgb,var(--bg) 70%,transparent) 100%)}

/* A shadow as well as a backing, because the banner can carry a publisher's
   own photograph and no gradient Ledger chooses knows what is in it. */
.disc .disc-po-by, .disc .disc-po-t, .disc .disc-po-s, .disc .disc-po-st{
  text-shadow:0 1px 2px color-mix(in srgb,var(--bg) 70%,transparent)}


/* THE BANNER'S TYPE IS NOT WHERE A SQUARE'S TYPE IS. All three lines sit in the
   lower left of a very wide picture, so the square's top-and-bottom gradient
   leaves the maker in the clear middle of it: 1.88:1, measured, and the worst
   number on the page. The band gets a backing shaped like the type that is on
   it, down the left and across the foot. */
.disc .disc-po.disc-banner-art .disc-po-scrim{
  background:linear-gradient(180deg,
      transparent 0%,
      transparent 26%,
      color-mix(in srgb,var(--bg) 84%,transparent) 56%,
      color-mix(in srgb,var(--bg) 92%,transparent) 100%)}

/* And the small type on a square carries a little more of itself, now that the
   measurement says how close the light grounds run. */
.disc .disc-po-st{color:color-mix(in srgb,var(--white) 88%,transparent)}
.disc .disc-po-by{color:color-mix(in srgb,var(--white) 90%,transparent)}
.disc .disc-po-scrim{
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 82%,transparent) 0%,
      transparent 32%,
      transparent 44%,
      color-mix(in srgb,var(--bg) 90%,transparent) 100%)}
.disc .disc-po.disc-po-top .disc-po-scrim{
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 90%,transparent) 0%,
      transparent 58%,
      transparent 68%,
      color-mix(in srgb,var(--bg) 78%,transparent) 100%)}

/* ============================================================================
   D17 · the buy row is the one action on the page
   ========================================================================== */

/* IT WAS A ROW OF METADATA WITH A BUTTON IN IT. Price and sale price set as
   unset fields, a bordered button the same weight as Back, and a line of
   explanatory copy: nothing on the page said which thing you had come to do.
   .disc-prim already existed and .disc-blib had never been given it.

   G3 settled the colour and L1 settled why it is allowed to shout: THIS BUTTON
   OPENS THE CHECKOUT AND TAKES NO MONEY. The one that takes money says Pay and
   complete order and lives in the checkout. */
.disc .disc-pbuy{padding:14px 16px; gap:12px 22px;
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--sem-action) 7%,var(--panel-raised)),
      var(--panel));
  border:1px solid color-mix(in srgb,var(--sem-action) 26%,var(--line))}
.disc .disc-blib{height:38px; padding:0 22px; border:0; border-radius:7px;
  background:var(--sem-action); color:var(--white);
  font:600 14px var(--display); letter-spacing:.01em;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sem-action) 18%,transparent),
             0 6px 18px color-mix(in srgb,var(--sem-action) 22%,transparent)}
.disc .disc-blib:hover{background:color-mix(in srgb,var(--white) 12%,var(--sem-action));
  box-shadow:0 0 0 5px color-mix(in srgb,var(--sem-action) 26%,transparent),
             0 8px 22px color-mix(in srgb,var(--sem-action) 30%,transparent)}
.disc .disc-blib:active{transform:translateY(1px)}

/* THE PRICE IS NOT SET AND WILL NOT BE UNTIL STRATEGY'S RATE CARD (S2), so the
   loud treatment has to hold up carrying those words rather than a number. The
   price block is given the room a figure will need and the type it will be set
   in, so the day the number arrives nothing is redesigned around it. */
.disc .disc-pbuy .disc-pbl{gap:28px}
.disc .disc-pbuy .disc-pbl .disc-fv{font:600 17px var(--display); color:var(--white)}
.disc .disc-pbuy .disc-pbl .disc-unset{font:400 13px var(--body); color:var(--text-3);
  font-style:normal}
.disc .disc-pbuy .disc-bn{flex:1 1 200px; font-size:11.5px; color:var(--text-2)}


/* ============================================================================
   D19 · the player takes a share of the mode, not the mode
   ========================================================================== */

/* AT A 900px WINDOW THE PLAYER LEFT ABOUT ONE ROW OF THE LIBRARY PAGE VISIBLE
   (Build, 29 Sept). The cause is reuse working exactly as intended and then
   overshooting: the pane is SURF.wavePane(), whose natural height is the
   Librarian's working pane, where the waveform IS the job. In Discover it is a
   demo of something you do not own yet, under the page you are reading.

   Tomas's call was a height rule or the player overlaying the page's foot.
   IT PUSHES AND IT IS CAPPED, rather than overlaying, because the rows you
   audition from are the page's own contents list: a panel that covers the foot
   covers the thing you are clicking, and a page that does not move is worth
   more than a player that is never in the way. The cap is on the pane alone,
   so the head and the transport keep their natural size and only the waveform
   gives ground. */
.disc .disc-play .disc-pane{max-height:clamp(64px, 22vh, 190px); overflow:hidden}
.disc .disc-play .disc-pane > *{max-height:100%}