/* ── Yours: your channel, diary and lists, and a shared list ──
   Loaded by /mine (with channels.css, whose stage it reuses) and /list
   (templates/mine/). Colours are the site's tokens (style.css). What the
   script fills keeps its box, so nothing moves as it is filled.          */

.mine-page { padding: 1rem var(--gutter) 2rem; max-width: 96rem; margin: 0 auto; }
.mine-badge { background: var(--accent-tint); color: var(--accent-text); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); }

/* Off: the box says why in place of Play, in the same box. */
.mine-off {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 1.5rem;
  place-content: center;
  text-align: center;
  color: var(--on-media);
  text-wrap: pretty;
}
.mine-off a { color: var(--on-media); text-decoration: underline; }
.mine-page[data-off] .mine-off { display: grid; }
.mine-page[data-off] .player-start { display: none; }

/* The why under the title: two lines, kept. */
.mine-why {
  color: var(--text-muted);
  font-size: var(--step--1);
  margin: 0 0 1rem;
  min-height: 2lh;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.channel-switch .btn[disabled] { opacity: 0.55; cursor: default; }

/* ── The diary and the lists ─────────────────────────────── */
.mine-section { padding-inline: 0; }
.mine-section > .section-title,
.mine-section > .section-desc { padding-inline: 0; }
.mine-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.75rem; }
.mine-note { color: var(--text-muted); font-size: var(--step--1); }
.mine-empty { color: var(--text-muted); margin: 0.5rem 0 0; }
.mine-empty[hidden] { display: none; }
.mine-rows { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0; }
.mine-rows[hidden] { display: none; }
.mine-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}
.mine-row--note { color: var(--text-muted); font-size: var(--step--1); }
.mine-day { color: var(--text-muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; min-width: 7.5rem; }
.mine-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: end; font-weight: 650; }
.mine-row-name { color: var(--text); font-weight: 600; flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.mine-small { padding: 0.45rem 0.8rem; font-size: var(--step--1); }
.mine-select, .mine-field {
  font: inherit;
  font-size: var(--step--1);
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--field-radius);
  padding: 0.45rem 0.8rem;
  min-width: 0;
  max-width: 100%;
}
.mine-field { flex: 1 1 14rem; }
.mine-label { font-weight: 600; font-size: var(--step--1); }
.mine-new { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin: 0 0 1rem; max-width: 48rem; }
.mine-new .mine-label { flex-basis: 100%; }
.mine-lists { display: grid; gap: 1.25rem; }
.mine-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 0.75rem 1rem;
  min-width: 0;
}
.mine-list-name { font-size: var(--step-1); margin: 0 0 0.25rem; overflow-wrap: anywhere; }
.mine-list-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.75rem; }
.mine-list-add .mine-label { flex-basis: 100%; }
.mine-list-add .mine-select { flex: 1 1 14rem; }
.mine-kept { color: var(--text-muted); font-size: var(--step--1); max-width: 60ch; margin: 2rem 0 0; text-wrap: pretty; }

/* ── A shared list (/list) ───────────────────────────────── */
.mine-shared { max-width: 60rem; }
.mine-shared-head { margin: 0 0 1.25rem; }
.mine-shared-head .page-title { overflow-wrap: anywhere; }
.mine-shared-about, .mine-shared-held { color: var(--text-muted); max-width: 60ch; text-wrap: pretty; }
.mine-shared-held { color: var(--text); }
.mine-shared-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mine-shared-row {
  display: grid;
  grid-template-columns: 2.5rem 6rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.mine-shared-row .mine-rank { font-size: var(--step-1); }
.mine-shared-art {
  display: block;
  width: 6rem;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--placeholder, var(--surface));
}
.mine-shared-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mine-shared-text { display: grid; gap: 0.15rem; min-width: 0; }
.mine-shared-name { color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
.mine-shared-held-name { color: var(--text-muted); font-weight: 600; }
.mine-shared-meta { color: var(--text-muted); font-size: var(--step--1); overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .mine-shared-row { grid-template-columns: 2rem 4.5rem minmax(0, 1fr); gap: 0.5rem; }
  .mine-shared-art { width: 4.5rem; }
  .mine-day { min-width: 0; flex-basis: 100%; }
}

/* TV mode: the 10-foot type, and room for the remote's ring. */
:root[data-tv] .mine-small { padding: 0.6rem 1rem; font-size: var(--step-0, 1rem); }
:root[data-tv] .mine-select, :root[data-tv] .mine-field { font-size: var(--step-0, 1rem); padding: 0.6rem 1rem; }