/* Mindprint — the save control and its collection sheet (D103).
   Consumes tokens.css; never redefines an --mp-* name. Dark only.

   Two colours carry the whole idea. The heart is pink, as it always has been — pink is every
   interactive word in this system (D30). A collection is peach, because peach is reserved for the
   generative moments *and for any chosen value*, and a collection is precisely a value the member
   chose. So a control aimed at Favorites and a control aimed at Winter Ideas are told apart at a
   glance, before either label is read, which is the affordance the whole feature turns on.

   Derived values live under --coll-*: the token set has no name for a floating menu's placement,
   and a new sheet may not invent an --mp-*. */

/* ── the control ─────────────────────────────────────────────────────────────────── */

/* Two buttons, one relative box. The chevron is a sibling because the wall tile is itself a
   <button> and nested buttons are invalid HTML. */
.savewrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  vertical-align: middle;
}

/* Joined, so the pair reads as one control rather than two buttons that happen to be adjacent. */
.savewrap.has-more > .hbtn.fav:not(.fav-compact) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 14px;
}

.hbtn.fav-more {
  width: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: transparent;
}

.hbtn.fav-more svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s;
}

.hbtn.fav-more[aria-expanded="true"] {
  color: var(--mp-ink);
  border-color: var(--mp-peach);
}

.hbtn.fav-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* The primary arm, aimed somewhere other than the heart. */
.hbtn.fav.fav-coll[aria-pressed="true"] { border-color: var(--mp-peach); }

.hbtn.fav .heart.coll-glyph {
  display: inline-grid;
  place-items: center;
  color: var(--mp-peach);
  width: 15px;
  height: 15px;
}

.hbtn.fav .heart.coll-glyph svg { width: 100%; height: 100%; }

/* ── the sheet ───────────────────────────────────────────────────────────────────── */

/* Fixed, not absolute: it is moved to whichever control opened it, and a sticky bar or a
   transformed card is not a containing block a menu can escape. The mini-cart is placed the same
   way, for the same reason. */
.collsheet {
  position: fixed;
  left: var(--coll-left, 50%);
  top: var(--coll-top, 50%);
  z-index: 130;
  width: min(280px, calc(100vw - 24px));
  max-height: min(62dvh, 460px);
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: #141418;
  border: 1px solid var(--mp-line-soft);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}

.collsheet.is-on { display: flex; }

/* [hidden] must beat a class that sets display — the trap this codebase has hit four times. */
.collsheet[hidden] { display: none; }

.collsheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
}

.collsheet-title {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9px;
  color: var(--mp-mute);
}

.collsheet-close {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--mp-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.collsheet-close:hover { color: var(--mp-ink); background: var(--mp-raise); }

.collsheet-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

/* The storefront picker's row, verbatim, plus the two things a destination needs that a filter
   does not: a glyph that says which collection, and a check that says the pattern is already in
   it. `.pat-opt` supplies the rest. */
.coll-opt,
.coll-new {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10.5px;
  color: var(--mp-dim);
  text-align: left;
}

.coll-opt:hover,
.coll-new:hover { color: var(--mp-ink); background: var(--mp-raise); }

.coll-opt:focus-visible,
.coll-new:focus-visible {
  outline: none;
  color: var(--mp-ink);
  background: var(--mp-raise);
  box-shadow: 0 0 0 2px rgba(255, 201, 160, .35);
}

.coll-sw {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--mp-raise);
  box-shadow: inset 0 0 0 1px var(--mp-line-soft);
  color: var(--mp-peach);
}

.coll-sw svg { width: 13px; height: 13px; }

/* The heart keeps its own colour wherever it appears — it is the one collection that is not a
   chosen value. */
.coll-opt[data-coll-favorites="1"] .coll-sw { color: var(--mp-pink); }
.coll-opt[data-coll-favorites="1"] .coll-sw .heart { font-size: 12px; line-height: 1; }

.coll-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coll-opt b {
  margin-left: auto;
  color: var(--mp-mute);
  font-size: 9px;
  font-weight: 400;
}

.coll-opt .tick {
  margin-left: 8px;
  color: var(--mp-pink);
  opacity: 0;
}

.coll-opt[aria-checked="true"] { color: var(--mp-ink); }
.coll-opt[aria-checked="true"] .tick { opacity: 1; }

/* Where the control is currently aimed. A hairline rather than a fill: this row is a *state*,
   and the ticks next to it are the answers to a different question. */
.coll-opt.is-aim { box-shadow: inset 2px 0 0 var(--mp-peach); }

.collsheet .pb-menu-rule {
  height: 1px;
  margin: 5px 4px;
  background: var(--mp-line);
}

.coll-new .coll-sw {
  color: var(--mp-peach);
  font-size: 14px;
  line-height: 1;
}

/* ── making one ──────────────────────────────────────────────────────────────────── */

.coll-make {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 2px;
}

.coll-make[hidden] { display: none; }

.coll-make-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  background: var(--mp-raise);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-pill);
  font-family: var(--mp-sans);
  font-size: 13px;
  color-scheme: dark;
}

.coll-make-input:focus {
  outline: none;
  border-color: var(--mp-peach);
  box-shadow: 0 0 0 3px rgba(255, 201, 160, .16);
}

.hbtn.coll-make-go {
  height: 34px;
  padding: 0 16px;
  font-size: 10px;
}

.coll-make-hint {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
  line-height: 1.5;
  color: var(--mp-peach);
  opacity: .75;
}

.collsheet .pat-all {
  display: block;
  margin-top: 4px;
  padding: 9px 10px;
  border-top: 1px solid var(--mp-line);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9.5px;
  color: var(--mp-mute);
  text-decoration: none;
}

.collsheet .pat-all:hover { color: var(--mp-ink); }

/* ── phone ───────────────────────────────────────────────────────────────────────── */

/* Below the sheet breakpoint the panel stops chasing a 24px corner button and docks to the
   bottom of the screen, where a thumb already is. Same element, same ids — the details panel's
   own two-forms-one-element shape. The placement variables JS wrote are ignored here on purpose;
   nothing has to know which form is showing. */
@media (max-width: 900px) {
  .collsheet {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-height: min(72dvh, 560px);
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    box-shadow: 0 -16px 46px rgba(0, 0, 0, .62);
  }

  .collsheet-title { font-size: 10px; }

  .coll-opt,
  .coll-new {
    /* A 44px row is the smallest thing a thumb hits reliably. */
    min-height: 44px;
    font-size: 11.5px;
  }

  .coll-make-input {
    /* The site-wide iOS floor: anything under 16px makes Safari zoom the page on focus. */
    font-size: 16px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hbtn.fav-more svg { transition: none; }
}

/* ── /account/collections ────────────────────────────────────────────────────────── */

.coll-make-panel,
.coll-boards {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--mp-line);
}

.coll-make-panel h2,
.coll-boards h2 {
  margin: 0 0 6px;
  font-family: var(--mp-display);
  font-size: 17px;
  letter-spacing: -.01em;
}

.coll-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.coll-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  color: var(--mp-mute);
}

.coll-field input {
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: var(--mp-raise);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-pill);
  font-family: var(--mp-sans);
  font-size: 13.5px;
  color-scheme: dark;
}

.coll-field input:focus {
  outline: none;
  border-color: var(--mp-pink);
  box-shadow: 0 0 0 3px rgba(251, 94, 190, .16);
}

/* The icon set as a radio group. Forty swatches is a lot of vertical space on a phone, so it
   scrolls in its own box rather than pushing the save button off the screen. */
.coll-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 10px;
  max-height: 168px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--mp-line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}

.coll-icons legend {
  padding: 0 4px;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  color: var(--mp-mute);
}

.coll-icon { cursor: pointer; }

/* The input is the control; the face is what you see. Kept in the accessibility tree (not
   display:none) so the group is still arrowable and announceable. */
.coll-icon input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.coll-icon-face {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--mp-raise);
  box-shadow: inset 0 0 0 1px var(--mp-line-soft);
  color: var(--mp-mute);
  transition: color .14s, box-shadow .14s, background .14s;
}

.coll-icon-face svg { width: 18px; height: 18px; }

.coll-icon:hover .coll-icon-face { color: var(--mp-ink); }

.coll-icon input:checked + .coll-icon-face {
  color: var(--mp-peach);
  box-shadow: inset 0 0 0 1px var(--mp-peach);
}

.coll-icon input:focus-visible + .coll-icon-face {
  box-shadow: inset 0 0 0 1px var(--mp-peach), 0 0 0 3px rgba(255, 201, 160, .28);
}

/* ── one board ───────────────────────────────────────────────────────────────────── */

.coll-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-card);
  background: var(--mp-surface);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 18px 40px -28px var(--glow, transparent);
}

.coll-card.is-aim { border-color: var(--mp-peach); }

.coll-card.is-dragging {
  opacity: .4;
  border-style: dashed;
}

.coll-cover {
  position: relative;
  display: block;
  width: 108px;
  height: 108px;
  border-radius: 11px;
  overflow: hidden;
  text-decoration: none;
}

/* Four thumbnails in a square, because a collection is a set and the honest picture of a set is
   some of it. One image fills the square; two split it; three or four make the quarters. */
.coll-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  width: 100%;
  height: 100%;
  gap: 1px;
  background: var(--mp-line);
}

.coll-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coll-mosaic img:only-child { grid-column: span 2; grid-row: span 2; }
.coll-mosaic img:first-child:nth-last-child(2),
.coll-mosaic img:first-child:nth-last-child(2) ~ img { grid-row: span 2; }
.coll-mosaic img:first-child:nth-last-child(3) { grid-row: span 2; }

.coll-mosaic.is-empty {
  background: repeating-linear-gradient(45deg, #1E1E22 0 6px, #26262C 6px 12px);
  box-shadow: inset 0 0 0 1px var(--mp-line-soft);
}

.coll-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--mp-r-pill);
  background: rgba(10, 10, 15, .82);
  backdrop-filter: blur(6px);
  color: var(--mp-peach);
}

.coll-card.is-heart .coll-badge { color: var(--mp-pink); }
.coll-badge svg { width: 14px; height: 14px; }
.coll-badge .heart { font-size: 13px; line-height: 1; }

.coll-body { min-width: 0; }

.coll-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.coll-head h3 {
  margin: 0;
  font-family: var(--mp-display);
  font-size: 16px;
  letter-spacing: -.01em;
}

.coll-naming { color: var(--mp-peach); font-style: italic; }

.coll-count {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9.5px;
  color: var(--mp-mute);
}

.coll-desc {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mp-dim);
}

.coll-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.coll-inline { display: inline-flex; margin: 0; }

.coll-aim-note {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--mp-r-pill);
  box-shadow: inset 0 0 0 1px var(--mp-peach);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9.5px;
  color: var(--mp-peach);
}

.drag-grip {
  width: 18px;
  height: 18px;
  flex: none;
  cursor: grab;
  /* Without this the page scroll wins the gesture on touch and the card never moves. */
  touch-action: none;
  background:
    radial-gradient(circle, var(--mp-mute) 1px, transparent 1.2px) 0 0 / 6px 6px;
  opacity: .6;
}

.drag-grip:hover { opacity: 1; }

/* Once the drag module is live the arrows are a second way to do the same thing; they stay in the
   markup so the no-script page keeps working, and go here because JS added the class. */
.coll-boards.drag-live .coll-arrows { display: none; }

.coll-edit {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mp-line);
}

.coll-edit[hidden] { display: none; }

.coll-danger {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--mp-line);
}

.coll-arm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  color: var(--mp-mute);
  cursor: pointer;
}

.coll-arm input { width: 16px; height: 16px; accent-color: var(--mp-pink); }

/* Armed, not confirmed: the button only becomes dangerous once the box is ticked, and says so. */
.coll-danger:not(:has(input[name="arm"]:checked)) button { opacity: .45; cursor: not-allowed; }

.coll-arm-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mp-mute);
}

@media (max-width: 640px) {
  .coll-card { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .coll-cover { width: 76px; height: 76px; }
  /* The site-wide iOS floor: under 16px, Safari zooms the page when the field takes focus. */
  .coll-field input { font-size: 16px; }
  .coll-icons { max-height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .coll-icon-face { transition: none; }
}

/* ── the browser's collection picker ─────────────────────────────────────────────── */

/* The picker's rows already reserve a 34px gutter for the generation shelf's twisty (`.pat-gut`).
   A member board's glyph goes IN that gutter rather than beside it — otherwise its label steps
   right of every other row's and the menu reads ragged, which is exactly the straight-column rule
   the twisty's gutter exists to keep. Scoped to `.pat-menu` so the save sheet, whose rows carry the
   same swatch in a flex row, is untouched. */
.pat-menu .pat-opt:has(.coll-sw) {
  position: relative;
  padding-left: 34px;
}

.pat-menu .pat-opt .coll-sw {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
}

/* ── the public pages: /u/{handle} and /u/{handle}/c/{slug} ──────────────────────── */

.pubshell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.pub-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--mp-line);
}

.pub-avatar {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: var(--mp-r-pill);
  object-fit: cover;
  box-shadow: inset 0 0 0 1px var(--mp-line-soft);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: var(--mp-r-pill);
  object-fit: cover;
  box-shadow: inset 0 0 0 1px var(--mp-line-soft);
}

.profile-avatar-empty {
  display: inline-block;
  background: repeating-linear-gradient(45deg, #1E1E22 0 6px, #26262C 6px 12px);
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-avatar-forms { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.profile-details-form textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--mp-raise);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line-soft);
  border-radius: 12px;
  font-family: var(--mp-sans);
  font-size: 13.5px;
  resize: vertical;
  color-scheme: dark;
}

.pub-id { min-width: 0; }

.pub-eyebrow {
  margin: 0 0 4px;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  color: var(--mp-mute);
}

.pub-head h1 {
  margin: 0;
  font-family: var(--mp-display);
  font-size: clamp(26px, 4.5vw, 40px);
  letter-spacing: -.02em;
}

.pub-handle {
  margin: 6px 0 0;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10.5px;
  color: var(--mp-mute);
}

.pub-handle a { color: var(--mp-pink); text-decoration: none; }
.pub-handle a:hover { text-decoration: underline; }

.pub-bio {
  margin: 10px 0 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mp-dim);
}

.pub-links { display: flex; gap: 14px; margin: 12px 0 0; flex-wrap: wrap; }

.pub-links a {
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  color: var(--mp-pink);
  text-decoration: none;
}

.pub-links a:hover { text-decoration: underline; }

.pub-boards h2 {
  margin: 28px 0 0;
  font-family: var(--mp-display);
  font-size: 18px;
  letter-spacing: -.01em;
}

.pub-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

/* The manage page's card, as a link: no forms, no grips — a stranger only ever opens it. */
a.coll-card.pub-board { text-decoration: none; color: inherit; margin-top: 14px; }
a.coll-card.pub-board:hover { border-color: var(--mp-line-soft); background: var(--mp-raise); }

.pub-head-board { align-items: center; }

.pub-board-badge {
  position: static;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 16px;
  background: var(--mp-raise);
  box-shadow: inset 0 0 0 1px var(--mp-line-soft);
  backdrop-filter: none;
}

.pub-board-badge svg { width: 26px; height: 26px; }

.pub-wall { margin-top: 26px; }

/* The account shelf's cell, reused: relative so the corner save control has a box to sit in. */
.pub-cell { position: relative; }

.pub-cell .savewrap {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
}

.pub-empty {
  margin: 40px 0;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--mp-mute);
}

@media (max-width: 640px) {
  .pub-head { flex-direction: column; }
  .pub-board-grid { grid-template-columns: 1fr; }
}

/* ── sharing controls on the manage page ─────────────────────────────────────────── */

.coll-share {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mp-line);
}

.coll-share-note {
  margin: 0 0 8px;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9.5px;
  color: var(--mp-mute);
}

.coll-share-note a { color: var(--mp-pink); text-decoration: none; text-transform: none; letter-spacing: 0; }
.coll-share-note a:hover { text-decoration: underline; }
.coll-share-note.is-live { color: var(--mp-peach); }
.coll-share-note.is-warn { color: var(--mp-dim); }

.coll-share-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }

.coll-share-pick select {
  height: 32px;
  padding: 0 12px;
  background: var(--mp-raise);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-pill);
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  color-scheme: dark;
}

/* The panel's re-share credit line (D103) — quiet provenance, not a call to action. */
.panel-saved-from {
  margin: 8px 0 0;
  font-family: var(--mp-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9.5px;
  color: var(--mp-mute);
}

.panel-saved-from a { color: var(--mp-peach); text-decoration: none; }
.panel-saved-from a:hover { text-decoration: underline; }

/* The public wall's corner control wears the wall's own pressed language: a solid disc, pink for
   the heart, peach for a chosen collection — a border tint alone reads as unpressed out here. */
.pub-cell .hbtn.fav[aria-pressed="true"] {
  background: var(--mp-pink);
  border-color: transparent;
}

.pub-cell .hbtn.fav[aria-pressed="true"] .heart { color: var(--mp-ink-on-pink); }

.pub-cell .hbtn.fav.fav-coll[aria-pressed="true"] { background: var(--mp-peach); }
.pub-cell .hbtn.fav.fav-coll[aria-pressed="true"] .heart.coll-glyph { color: var(--mp-ink-on-pink); }