/* ====================================================================
   MINIMALER Radar — auth + dashboard styles
   (Round 3a + 3b + 3c batches 1–6)

   Loaded after style.css.
   ==================================================================== */


/* ====================================================================
   1. Topbar slot
   ==================================================================== */

.auth-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  position: relative;
}

.auth-link {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--grey);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 9px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.auth-link:hover  { color: var(--white); border-color: var(--grey-faint); }
.auth-link:focus-visible { outline: 1px solid var(--white); outline-offset: 1px; }

.auth-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--heading);
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-dim);
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--glass-shadow-light);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  max-width: 180px;
  transition: color .14s, border-color .14s, font-weight .14s;
}
.auth-button:hover {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.auth-button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.auth-button-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-chev {
  font-size: 10px;
  color: var(--grey);
  line-height: 1;
}

.auth-menu {
  /* TIER 3 — glass-strong floating dropdown. Same DNA as notif-panel
     and rm-panel: blur + saturate + brand-tinted shadow + noise. */
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  z-index: 100;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow-strong);
  padding: 6px;
  animation: fade .15s ease;
}
.auth-menu[hidden] { display: none; }
.auth-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--glass-noise);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: var(--glass-noise-strong);
  border-radius: inherit;
}
.auth-menu > * { position: relative; z-index: 1; }

.auth-menu-email {
  padding: 9px 10px 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey);
  border-bottom: 1px solid var(--line-soft);
  word-break: break-all;
  margin-bottom: 4px;
}

.auth-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--white);
  background: transparent;
  border: none;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.auth-menu-item:hover { background: rgba(4, 31, 40, 0.06); }
.auth-menu-item--quiet { color: var(--grey); }
.auth-menu-item--quiet:hover { color: var(--white); }

/* Phase C batch C — admin menu link (anchor styled like a button) */
.auth-menu-item--admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  color: var(--white);
}
.auth-menu-item--admin:hover { background: rgba(4, 31, 40, 0.06); }

/* Number badge inside the dropdown — shows pending count */
.auth-menu-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #ffffff;
  background: var(--unread);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
  min-width: 18px;
  text-align: center;
}
.auth-menu-badge[hidden] { display: none; }

/* Small dot on the auth-button trigger when admin has pending items.
   Smaller and less prominent than the activity dot — this is a
   queue-state hint, not a new-event notification. */
.auth-button-admin-badge {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--unread);
  flex-shrink: 0;
}
.auth-button-admin-badge[hidden] { display: none; }


/* ====================================================================
   Notifications / Activity center (A.4 + Phase C batch C)
   The activity ▾ trigger lives in the topbar #status row next to the
   auth-slot. Click opens a dropdown panel below, listing sections:
   replies, drops today, and (admins only) pending label claims.
   Same dropdown DNA as .auth-menu — black panel, line border, shadow.
   ==================================================================== */

.notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notif-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--heading);
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-dim);
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--glass-shadow-light);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .14s, border-color .14s, font-weight .14s;
}
.notif-button:hover {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.notif-button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.notif-button.has-unread { border-color: rgba(150, 46, 46, 0.45); }

.notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--unread);  /* burgundy via brand token (light-adjusted) */
  flex-shrink: 0;
}
.notif-dot[hidden] { display: none; }

.notif-label {
  white-space: nowrap;
}

.notif-chev {
  font-size: 10px;
  color: var(--grey);
  line-height: 1;
}

/* ---- Dropdown panel ---- */
.notif-panel {
  /* TIER 3 — glass-strong floating activity dropdown */
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  z-index: 100;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow-strong);
  padding: 6px;
  animation: fade .15s ease;
}
.notif-panel[hidden] { display: none; }
.notif-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--glass-noise);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: var(--glass-noise-strong);
  border-radius: inherit;
}
.notif-panel > * { position: relative; z-index: 1; }

.notif-empty {
  padding: 18px 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--grey);
  letter-spacing: 0.04em;
}

/* ---- Section headers (replies / drops today / label claims) ---- */
.notif-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 6px;
  margin-top: 4px;
}
.notif-section-head:first-child { margin-top: 0; }
.notif-sec-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-dim);
}
.notif-sec-count {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: #ffffff;
  background: var(--unread);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
  min-width: 18px;
  text-align: center;
}

/* ---- Items (rows) ---- */
.notif-item {
  display: block;
  padding: 10px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--white);
  transition: background .12s ease;
  border-left: 2px solid transparent;
  margin-bottom: 2px;
}
.notif-item:hover { background: rgba(4, 31, 40, 0.06); }
.notif-item.is-unread {
  border-left-color: var(--unread);
}

.notif-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--grey);
}
.notif-handle {
  color: var(--white);
  font-weight: 600;
}
.notif-mid {
  color: var(--grey-dim);
}
.notif-rel {
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.notif-ago {
  color: var(--grey-dim);
  font-size: 10px;
  white-space: nowrap;
}
.notif-row-body {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--grey);
  margin-top: 4px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Mobile (≤720px): panel becomes a viewport-anchored sheet rather
   than a dropdown nested under .notif-wrap. The previous rule used
   `right: -12px` relative to .notif-wrap — but in the F.5 topbar,
   .notif-wrap sits in the middle-right of row 2 (next to the burger),
   so anchoring relative to it pushed the panel's LEFT edge off-screen
   at iPhone widths and clipped its text.
   
   Switching to `position: fixed` + `left: 14px / right: 14px` pins
   both edges to viewport gutters. Left edge of the panel aligns with
   the rest of the page content (which uses `clamp(14px, 4vw, 32px)`
   side padding — floor 14px on phones).
   
   Also: both .auth-menu (burger) and .notif-panel (activity) drop the
   glass background on mobile in favour of a SOLID release-card colour
   (#e9f0f4). The translucent glass-strong (rgba(255,255,255,0.62) +
   blur) revealed the vinyl + orbit cards behind the panel and broke
   readability. Rules below MUST live in auth.css (not style.css)
   because auth.css loads after style.css — the equivalent rules in
   style.css were losing the source-order battle at equal specificity. */

/* --- Solid panel backgrounds (mobile AND desktop) --------------------
   Per Cathy's review: the orbit + label tiles bleed through the glass
   on both viewport sizes. Solid #e9f0f4 fill matches the release-card
   surface DNA. Strong shadow preserves the "floating" feel. Outside
   any media query so it applies everywhere. */
.auth-menu,
.notif-panel {
  background: #e9f0f4;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(4, 31, 40, 0.08);
  box-shadow:
    0 16px 48px 0 rgba(4, 31, 40, 0.22),
    0 4px 12px 0 rgba(4, 31, 40, 0.10);
}
.auth-menu::before,
.notif-panel::before {
  opacity: 0;
}

/* --- Mobile (≤720px): both panels become viewport-anchored sheets ---
   .auth-menu joins .notif-panel here so the burger menu opens as a
   sheet below the tabs row, exactly like the activity panel. Creates
   a consistent "tap a topbar icon → sheet slides down" mental model. */
@media (max-width: 720px) {
  .auth-menu,
  .notif-panel {
    position: fixed;
    /* Sits below the full 3-row topbar. The topbar height varies
       slightly between iPhone classes but ~138-148px covers all
       modern devices comfortably; using 144px as a tuned middle
       value with the panel's own 6px-from-top buffer baked in. */
    top: 144px;
    left: 14px;
    right: 14px;
    width: auto;
    max-height: calc(100vh - 168px);
  }
  .notif-rel { max-width: 160px; }
}


/* ====================================================================
   2. Auth modal
   ==================================================================== */

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 40px);
}
.auth-modal[hidden] { display: none; }

.auth-backdrop {
  position: absolute;
  inset: 0;
  /* Softer backdrop for the light palette — same convention as
     rm-backdrop in style.css. */
  background: rgba(17, 17, 17, 0.42);
  backdrop-filter: blur(4px);
  animation: fade .2s ease;
}

.auth-panel {
  /* TIER 3 — glass-strong modal panel, same DNA as rm-panel */
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow-strong);
  animation: rmpop .22s ease;
}
.auth-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--glass-noise);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: var(--glass-noise-strong);
  border-radius: inherit;
}
.auth-panel > * { position: relative; z-index: 1; }

.auth-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  /* The close button sits above the noise overlay via the panel's
     > * z-index rule, but as a fixed-position child we re-assert here. */
  z-index: 2;
}
.auth-close:hover { border-color: var(--accent); color: var(--accent); }

.auth-body { padding: 38px 28px 28px; }

.auth-h {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--white);
  line-height: 1.25;
}

.auth-intro {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
  margin: 0 0 22px 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--white);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .15s ease;
}
.auth-input::placeholder { color: var(--grey-dim); }
.auth-input:focus { outline: none; border-color: var(--white); }

.auth-submit {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  /* Primary CTA — brand-dark fill (#041f28 via --white), bg
     darkens to accent #214d5c on hover. */
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.auth-submit:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.auth-submit:disabled { opacity: 0.55; cursor: default; }

.auth-error {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--unread);
  padding: 4px 2px 0;
}

.auth-different {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-different:hover { color: var(--white); }


/* ====================================================================
   3. My Radar dashboard
   ==================================================================== */

/* Signed-out */
.mr-signedout {
  max-width: 480px;
  margin: 60px auto 40px;
  text-align: center;
  padding: 40px 24px;
}
.mr-signedout-h {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 14px 0;
}
.mr-signedout-p {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
  margin: 0 0 28px 0;
}
.mr-signin-btn {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--radius);
  padding: 12px 28px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mr-signin-btn:hover { background: var(--accent); border-color: var(--accent); }

/* Dashboard page (outer wrapper — 3c batch 6.5) */
.mr-page {
  max-width: 920px;
  margin: 20px auto 60px;
  padding: 0 clamp(12px, 3vw, 24px);
}
.mr-page > .mr-welcome-card {
  margin-bottom: 14px;
}

/* Sub-tab nav — segmented control (3c batch 6.5) */
.mr-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: var(--radius);
  margin-bottom: 20px;
  box-shadow: 0 8px 20px -6px rgba(4, 31, 40, 0.10),
              0 4px 10px -2px rgba(4, 31, 40, 0.06),
              0 2px 4px rgba(4, 31, 40, 0.04);
}
.mr-tab {
  flex: 1;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--grey);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  padding: 11px 16px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.mr-tab:hover:not(.active) { color: var(--white); }
.mr-tab.active {
  color: var(--white);
  background: #e9f0f4;
}
.mr-tab:focus-visible {
  outline: 1px solid var(--white);
  outline-offset: 2px;
}

/* Tab content grids */
.mr-dashboard {
  display: grid;
  /* minmax(0, …) NOT plain 1fr: this outer single-column grid wraps the
     .mr-block / .mr-block-grid stack. A bare 1fr track refuses to shrink
     below its content's min-content width, so the intrinsic width of a
     wide inner card bubbled UP through this track and burst the .mr-page
     920px cap — making the whole dashboard ~2000px and letting the inner
     .mr-block-grid split that into 993+993. minmax(0,1fr) caps this track
     to the container so widths cascade down correctly. (2026-05-29) */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
/* Profile tab — always single column; the editors flow top-to-bottom. */
.mr-dashboard-profile {
  grid-template-columns: 1fr;
}
/* Music tab — Phase 4.6 sectioned dashboard. The .mr-dashboard-music
   container is now a vertical flow of .mr-block sections; each block
   carries its own .mr-block-grid for its 2-column inner layout.
   Stats becomes a full-width strip living alone in its own block. */
.mr-dashboard-music {
  grid-template-columns: minmax(0, 1fr);  /* match .mr-dashboard fix — no bare 1fr */
  gap: 32px;
}

.mr-card {
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 8px 20px -6px rgba(4, 31, 40, 0.10),
              0 4px 10px -2px rgba(4, 31, 40, 0.06),
              0 2px 4px rgba(4, 31, 40, 0.04);
}

.mr-card-title {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--white);
  margin: 0 0 20px 0;
}
.mr-card-meta {
  font-weight: 400;
  color: var(--grey-dim);
  margin-left: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.mr-card-subtitle {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  margin: -8px 0 14px 0;
  line-height: 1.5;
}

/* Welcome card — 4.5 Phase 3 — editorial hero
   Eyebrow line with brand signal + week/date meta sits at the top,
   greeting underneath in big display type with avatar to its left.
   The card itself is glass-light to lift it off the page bg without
   competing with the radar Hero of the day (which uses glass-medium). */
.mr-welcome-card {
  position: relative;
  padding: 28px 24px;
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: var(--glass-shadow-light);
  overflow: hidden;  /* contains the noise ::before */
}
.mr-welcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--glass-noise);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: var(--glass-noise-light);
  border-radius: inherit;
}
.mr-welcome-card > * { position: relative; z-index: 1; }

.mr-welcome-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.mr-welcome-signal {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(33, 77, 92, 0.5);
  animation: mr-welcome-ping 2.4s ease-out infinite;
  flex-shrink: 0;
}
@keyframes mr-welcome-ping {
  0%   { box-shadow: 0 0 0 0   rgba(33, 77, 92, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(33, 77, 92, 0); }
  100% { box-shadow: 0 0 0 0   rgba(33, 77, 92, 0); }
}
.mr-welcome-meta {
  color: var(--accent);
}

.mr-welcome-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.mr-welcome-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--raised-2);
  display: block;
  box-shadow: 0 2px 8px -2px rgba(4, 31, 40, 0.16);
}
.mr-welcome-avatar--empty {
  background: var(--raised-2);
  border: 1px dashed var(--line);
}
.mr-greeting {
  /* Bigger, more confident editorial hero typography. Helvena Black
     uppercase via display token, generous size for the personal feel. */
  font-family: var(--display);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  color: var(--white);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .mr-welcome-card { padding: 22px 18px; }
  .mr-welcome-eyebrow { font-size: 9.5px; letter-spacing: 0.1em; }
  .mr-welcome-row { gap: 14px; }
  .mr-welcome-avatar { width: 52px; height: 52px; }
  .mr-greeting { font-size: 22px; }
}


/* ====================================================================
   3c batch 6 — Profile completeness card
   ==================================================================== */

.mr-complete-bar {
  height: 4px;
  background: var(--raised-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
}
.mr-complete-bar-fill {
  height: 100%;
  background: var(--white);
  transition: width .4s ease;
}

.mr-complete-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mr-complete-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mr-complete-row:hover {
  background: var(--raised-2);
  border-color: var(--line);
}

.mr-complete-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--grey-dim);
  flex-shrink: 0;
}
.mr-complete-label {
  flex: 1;
  text-align: left;
}
.mr-complete-arrow {
  font-family: var(--mono);
  color: var(--grey-dim);
  font-size: 14px;
  transition: transform .15s ease, color .15s ease;
}
.mr-complete-row:hover .mr-complete-arrow {
  color: var(--white);
  transform: translateX(2px);
}


/* ====================================================================
   3c batch 6 — Discoveries card (uses dig preview tile styles below)
   ==================================================================== */
/* No special styles needed beyond .mr-card and .mr-dig-preview/tile,
   which the discoveries card reuses. */


/* ====================================================================
   3c batch 6 — Recent activity card
   ==================================================================== */

.mr-recent-list {
  display: flex;
  flex-direction: column;
}
.mr-recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: opacity .15s ease;
}
.mr-recent-row:last-child { border-bottom: 0; }
.mr-recent-row:hover { opacity: 0.85; }

.mr-recent-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--line-soft);
  flex-shrink: 0;
}
.mr-recent-thumb-empty { background: var(--line-soft); }

.mr-recent-info {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.35;
}
.mr-recent-title {
  color: var(--white);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-recent-sub {
  color: var(--grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.mr-recent-ago {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-dim);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}


/* ====================================================================
   3c batch 6 — Throwback card
   ==================================================================== */

.mr-throwback-card {
  display: flex;
  flex-direction: column;
}

.mr-throw-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 14px;
}
.mr-throw-cover {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--line-soft);
  display: block;
  transition: transform .2s ease;
}
.mr-throw-item:hover .mr-throw-cover { transform: translateY(-2px); }
.mr-throw-cover-empty { background: var(--line-soft); }

.mr-throw-info {
  font-family: var(--mono);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}
.mr-throw-title { color: var(--white); font-weight: 600; }
.mr-throw-artist { color: var(--grey); margin-top: 2px; }
.mr-throw-label { color: var(--grey-dim); font-size: 11.5px; margin-top: 2px; }
.mr-throw-ago {
  color: var(--grey-dim);
  font-size: 11px;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.mr-throw-again {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--grey);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.mr-throw-again:hover {
  color: var(--white);
  border-color: var(--grey-faint);
  border-style: solid;
}


/* ====================================================================
   3d batch 3 — Music tab unread badge + Your comments + Replies cards
   ==================================================================== */

/* Badge on the Music sub-tab nav button */
.mr-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 8px;
  border-radius: 9px;
  background: var(--unread);
  color: var(--white);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
}

/* (Phase 4.6 — these cards now live inside .mr-block-grid sub-containers,
   no special grid-column overrides needed; the inner grid handles it.) */

/* ---- Your recent comments card ---- */
.mr-mycom-list {
  display: flex;
  flex-direction: column;
}

.mr-mycom-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: opacity .15s ease;
}
.mr-mycom-row:last-child { border-bottom: 0; }
.mr-mycom-row:hover { opacity: 0.85; }

.mr-mycom-cover {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--line-soft);
  flex-shrink: 0;
}
.mr-mycom-cover-empty { background: var(--line-soft); }

.mr-mycom-info {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}
.mr-mycom-body {
  color: var(--white);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mr-mycom-meta {
  color: var(--grey-dim);
  font-size: 11px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-mycom-record { color: var(--grey); }
.mr-mycom-ago { font-variant-numeric: tabular-nums; }

/* ---- Replies to you card ---- */
.mr-replies-list {
  display: flex;
  flex-direction: column;
}

.mr-reply-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: opacity .15s ease, background .15s ease;
}
.mr-reply-row:last-child { border-bottom: 0; }
.mr-reply-row:hover { opacity: 0.85; }

/* Unread highlight — subtle left border pop */
.mr-reply-row--unread {
  margin: 0 -10px;
  padding: 10px;
  background: var(--raised-2);
  border-radius: var(--radius);
  border-bottom: 0;
  border-left: 2px solid var(--unread);
}

.mr-reply-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--line-soft);
}
.mr-reply-avatar-empty {
  background: var(--line-soft);
  border: 1px dashed var(--line);
}

.mr-reply-info {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}

.mr-reply-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-size: 11px;
}

.mr-reply-handle {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.mr-reply-handle:hover { text-decoration: underline; text-underline-offset: 2px; }

.mr-reply-context {
  color: var(--grey-dim);
  font-style: normal;
}
.mr-reply-context em {
  color: var(--grey);
  font-style: normal;
  font-weight: 600;
}

.mr-reply-ago {
  color: var(--grey-dim);
  font-variant-numeric: tabular-nums;
}

.mr-reply-new {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  margin-left: 2px;
  border-radius: 3px;
  background: var(--unread);
  color: var(--white);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.mr-reply-body {
  color: var(--white);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


/* ====================================================================
   Dig list preview (existing — also reused by Discoveries card)
   ==================================================================== */

.mr-dig-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.mr-dig-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.mr-dig-item:hover .mr-dig-t-title { color: var(--white); }
.mr-dig-cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--line-soft);
  border-radius: var(--radius);
  display: block;
}
.mr-dig-cover-empty { background: var(--line-soft); }
.mr-dig-info {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.35;
}
.mr-dig-t-title {
  color: var(--white);
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mr-dig-t-artist {
  color: var(--grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.mr-empty {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
  margin: 0;
}
.mr-dig-more {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-dim);
  margin: 14px 0 0 0;
  text-align: center;
}

/* Stats */
.mr-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.mr-stat {
  background: #e9f0f4;
  padding: 14px 12px;
  border-radius: var(--radius);
  text-align: center;
}
.mr-stat b {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
}
.mr-stat span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--grey);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

.mr-top { margin-top: 18px; }
.mr-top-title {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--grey-dim);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.mr-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mr-top-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: var(--radius);
}
.mr-top-list li:nth-child(odd) { background: #e9f0f4; }
.mr-top-name {
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}
.mr-top-count {
  color: var(--grey-dim);
  flex-shrink: 0;
}

/* Identity card */
.mr-field {
  margin-bottom: 22px;
}
.mr-field:last-of-type { margin-bottom: 16px; }

.mr-field-label {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--grey);
  margin-bottom: 8px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.mr-field-row {
  display: flex;
  gap: 8px;
}
.mr-input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--white);
  background: #e9f0f4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 11px 14px;
  box-shadow: 0 2px 8px rgba(4, 31, 40, 0.07),
              0 1px 3px rgba(4, 31, 40, 0.04);
  transition: border-color .14s, box-shadow .14s;
}
.mr-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(33, 77, 92, 0.10),
              0 2px 8px rgba(4, 31, 40, 0.10);
}
.mr-save {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--radius);
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.mr-save:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; }

.mr-field-help {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-dim);
  line-height: 1.5;
  margin: 8px 0 0 0;
}
.mr-field-status {
  font-family: var(--mono);
  font-size: 11.5px;
  margin: 6px 0 0 0;
  min-height: 1.2em;
  letter-spacing: 0.02em;
}
.mr-field-status.ok  { color: #6fcf97; }
.mr-field-status.err { color: var(--unread); }

.mr-field-url {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--grey);
  margin: 8px 0 0 0;
  word-break: break-all;
  padding: 10px 12px;
  background: #e9f0f4;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(4, 31, 40, 0.07),
              0 1px 3px rgba(4, 31, 40, 0.04);
}

.mr-toggle-field { display: block; }
.mr-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mr-toggle {
  appearance: auto;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.mr-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

.mr-signout {
  display: block;
  width: 100%;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  margin-top: 14px;
  transition: border-color .15s ease, color .15s ease;
}
.mr-signout:hover {
  border-color: var(--grey-faint);
}


/* ====================================================================
   4. Profile card (existing)
   ==================================================================== */

.mr-profile-intro {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  line-height: 1.55;
  margin: -8px 0 22px 0;
}

/* Media (avatar / banner) */
.mr-media-field { margin-bottom: 22px; }
.mr-media-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.mr-media-preview {
  flex-shrink: 0;
  background: var(--raised-2);
  overflow: hidden;
  display: block;
  position: relative;
}
.mr-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mr-media-empty {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(45deg, transparent 48%, var(--line) 48%, var(--line) 52%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, var(--line) 48%, var(--line) 52%, transparent 52%),
    var(--raised-2);
  opacity: 0.5;
}
.mr-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.mr-banner-preview {
  width: 240px;
  height: 90px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.mr-media-controls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mr-media-controls .mr-field-help { margin: 0; }
.mr-media-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.mr-media-upload {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  transition: background .15s ease;
}
.mr-media-upload:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.mr-media-upload:disabled { opacity: 0.55; cursor: default; }
.mr-media-remove {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--grey);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.mr-media-remove:hover:not(:disabled) {
  color: var(--white);
  border-color: var(--grey-faint);
}
.mr-media-remove:disabled { opacity: 0.55; cursor: default; }

@media (max-width: 480px) {
  .mr-media-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .mr-avatar-preview,
  .mr-banner-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: 200px;
  }
  .mr-banner-preview {
    aspect-ratio: 2.67;
    max-width: 100%;
  }
}

/* Bio textarea + counter */
.mr-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 84px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--white);
  background: #e9f0f4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 13px 15px;
  resize: vertical;
  box-shadow: 0 2px 8px rgba(4, 31, 40, 0.07),
              0 1px 3px rgba(4, 31, 40, 0.04);
  transition: border-color .14s, box-shadow .14s;
}
.mr-textarea::placeholder { color: var(--grey-dim); opacity: 0.55; }
.mr-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(33, 77, 92, 0.10),
              0 2px 8px rgba(4, 31, 40, 0.10);
}

.mr-bio-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
}
.mr-bio-foot .mr-field-help { margin: 0; flex: 1; }
.mr-bio-counter {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-dim);
  flex-shrink: 0;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
.mr-bio-counter.over { color: var(--unread); }

/* Links grid */
.mr-link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}
@media (min-width: 600px) {
  .mr-link-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

.mr-link-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mr-link-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--grey-dim);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  padding-left: 2px;
}
.mr-link-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--white);
  background: #e9f0f4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 13px;
  box-shadow: 0 2px 8px rgba(4, 31, 40, 0.07),
              0 1px 3px rgba(4, 31, 40, 0.04);
  transition: border-color .14s, box-shadow .14s;
}
.mr-link-input::placeholder { color: var(--grey-dim); opacity: 0.55; }
.mr-link-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(33, 77, 92, 0.10),
              0 2px 8px rgba(4, 31, 40, 0.10);
}

/* Custom links */
.mr-custom-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.mr-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 480px) {
  .mr-custom-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label remove"
      "url   url";
    gap: 6px;
  }
  .mr-custom-row .mr-custom-label-input { grid-area: label; }
  .mr-custom-row .mr-custom-url-input   { grid-area: url; }
  .mr-custom-row .mr-custom-remove      { grid-area: remove; }
}

.mr-custom-label-input,
.mr-custom-url-input {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--white);
  background: #e9f0f4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 13px;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(4, 31, 40, 0.07),
              0 1px 3px rgba(4, 31, 40, 0.04);
  transition: border-color .14s, box-shadow .14s;
}
.mr-custom-label-input::placeholder,
.mr-custom-url-input::placeholder { color: var(--grey-dim); opacity: 0.55; }
.mr-custom-label-input:focus,
.mr-custom-url-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(33, 77, 92, 0.10),
              0 2px 8px rgba(4, 31, 40, 0.10);
}

.mr-custom-remove {
  width: 38px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--grey);
  background: #e9f0f4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(4, 31, 40, 0.07),
              0 1px 3px rgba(4, 31, 40, 0.04);
  transition: color .14s, box-shadow .14s;
}
.mr-custom-remove:hover {
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(4, 31, 40, 0.10),
              0 2px 4px rgba(4, 31, 40, 0.05);
}

.mr-add-custom {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--grey);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.mr-add-custom:hover:not(:disabled) {
  color: var(--white);
  border-color: var(--grey-faint);
  border-style: solid;
}
.mr-add-custom:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mr-profile-save-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.mr-profile-save-row .mr-field-status {
  margin: 0;
  flex: 1;
}
.mr-save-profile {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--radius);
  padding: 12px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.mr-save-profile:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.mr-save-profile:disabled {
  opacity: 0.55;
  cursor: default;
}


/* ====================================================================
   5. Small screens
   ==================================================================== */

@media (max-width: 480px) {
  .auth-body { padding: 32px 22px 24px; }
  .auth-h { font-size: 18px; }
  .auth-button { max-width: 130px; }

.mr-throw-cover { width: 140px; height: 140px; }

  .mr-profile-save-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .mr-save-profile { width: 100%; }
}

/* ====================================================================
   PHASE 4.6 — Sectioned music dashboard
   ==================================================================== */

/* .mr-block — a thematic group on the music tab (signal / collection /
   voice / patterns). Wraps an optional full-width feature (the
   favorite-labels strip) + a 2-column grid of paired cards. */
.mr-block {
  margin-bottom: 36px;
}
.mr-block:last-child {
  margin-bottom: 0;
}

/* Section heading — chapter divider above each .mr-block group.
   Aligned with welcome card content (24px from .mr-page edge, same X
   as "GOOD AFTERNOON, FOUNDER" and every .mr-card content). Selector
   nested under .mr-page to definitively beat the generic h2 base in
   style.css regardless of source order. */
.mr-page .mr-block-title,
.mr-dashboard .mr-block-title {
  font-family: var(--heading) !important;
  font-weight: 900 !important;             /* Helvena Black */
  font-size: 20px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white) !important;
  margin: 0 0 22px 0 !important;
  padding: 0 0 0 24px !important;          /* align with .mr-card content */
  line-height: 1.2;
}

/* The favorite-labels strip lives at the top of section 1, full-width,
   above the discoveries/recent-activity grid */
.mr-block > .fls {
  margin-bottom: 18px;
}

/* 2-column grid for paired cards inside a block */
.mr-block-grid {
  display: grid;
  /* minmax(0, …) NOT plain 1fr: a bare 1fr track refuses to shrink below
     its content's min-width, so a long unwrapped title (e.g. a release
     name in the recent-activity card) blew each track out to ~993px and
     the row overflowed the page. minmax(0,…) lets the track shrink; the
     `.mr-block-grid > * { min-width: 0 }` rule below lets the card inside
     it truncate. (2026-05-29) */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;  /* short cards don't stretch — they stay tight */
}
.mr-block-grid > * {
  min-width: 0;  /* critical: let columns truncate text instead of expanding
                    to fit min-content, which was making cards extend past
                    the welcome card width */
}
@media (min-width: 720px) {
  .mr-block-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ----- Stats card horizontal layout (Phase 4.6 — full-width strip) ----- */
/* Counters in a horizontal row of 4 (was 2x2 grid) */
.mr-stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media (min-width: 720px) {
  .mr-stats-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

/* Top labels + top artists side by side (was stacked vertically) */
.mr-tops-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) {
  .mr-tops-row {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
.mr-tops-row .mr-top {
  margin-top: 0;
}

/* ====================================================================
   Phase 4.6+ — Section 1 card backgrounds (icy, lifted off page)
   ==================================================================== */
.mr-fls-card,
.mr-recent-card,
.mr-discoveries-card,
.mr-dig-card,
.mr-throwback-card,
.mr-mycom-card,
.mr-replies-card {
  background: #e9f0f4;
}

/* The fave-labels strip used to live free-standing and broke out of
   its container with a negative margin so tiles could scroll under
   the viewport edge. Inside a bounded .mr-card it needs to stay 
   contained — neutralize the breakout. */
.mr-fls-card .fls-scroll {
  margin: 0;
  padding: 4px 0 10px;
  scroll-padding-left: 0;
}

/* Discoveries sits full-width below the favorite-labels / recent-activity 
   grid in section 1 — give it a top margin to separate from the row. */
.mr-block > .mr-discoveries-card {
  margin-top: 18px;
}

/* ====================================================================
   F.5.2 — Music tab mobile cleanup
   ----------------------------------------------------------------------
   On mobile, the .mr-block-title editorial headings ("THIS WEEK'S
   SIGNAL", "YOUR COLLECTION", "DISCOVERIES THIS WEEK", "YOUR VOICE",
   "LABELS ON WATCH") feel redundant — each card already carries its
   own internal title (RECENT ACTIVITY, YOUR DIG LIST, etc.), and the
   single-column mobile layout makes the chapter-divider role of these
   headings less necessary than on desktop's 2-column grid.
   
   Hiding them entirely also resolves the alignment dissonance between
   the headings (24px-indented) and the cards (page-edge aligned) on
   narrow viewports. Desktop layout is unchanged.
   
   Additionally tightens .mr-block margin-bottom on mobile so the
   header-less cards flow naturally instead of being separated by the
   36px desktop gap that was sized to accommodate the headings.
   ==================================================================== */
@media (max-width: 720px) {
  .mr-page .mr-block-title,
  .mr-dashboard .mr-block-title {
    display: none !important;
  }
  .mr-block {
    margin-bottom: 16px;
  }
  /* Width containment for music tab cards.
     
     The .mr-block-grid > * { min-width: 0 } rule earlier in the file
     was meant to prevent cards from overflowing past their container
     when internal content (like long artist names in mr-recent-card,
     or long label names in mr-top-list) hit their min-content size.
     But on iPhone-width viewports, the cards STILL extend past the
     welcome card's right edge — meaning min-width: 0 alone isn't
     catching every case.
     
     Belt-and-braces: cap .mr-block + .mr-block-grid + .mr-card all
     explicitly to 100% of their container, AND apply overflow:hidden
     to .mr-card as a final containment net (any overflowing child
     gets clipped instead of pushing the card width). */
  .mr-block,
  .mr-block-grid {
    max-width: 100%;
    min-width: 0;
  }
  .mr-dashboard-music .mr-card {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
}



/* ====================================================================
   Phase H.2.b — Curator workspace styles
   ----------------------------------------------------------------------
   The workspace lives at #cu-root inside the curation sub-tab of
   MY RADAR. Two main states for this batch:
     - State A: empty entry card ("Curate your first selection")
     - State B: builder (banner + intro + 11 slots + picker drawer)
   
   Tokens used from elsewhere in the system: --white, --grey, --grey-dim,
   --raised, --raised-2, --line-soft, --radius, --heading, --mono,
   --display. Card surfaces use #e9f0f4 to match the Phase 4.6+ DNA.
   
   Mobile (≤720px): picker becomes a full-viewport modal instead of a
   side drawer. Slots remain single-column. State banner stacks.
   ==================================================================== */

.cu-root {
  min-height: 200px;
}

.cu-loading {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey);
  text-align: center;
  padding: 40px 0;
}

/* ---- State A — empty entry ----------------------------------------- */
.cu-empty-card {
  background: #e9f0f4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0 8px 20px -6px rgba(4, 31, 40, 0.10),
              0 4px 10px -2px rgba(4, 31, 40, 0.06),
              0 2px 4px rgba(4, 31, 40, 0.04);
}
.cu-empty-h {
  font-family: var(--heading);
  font-weight: 900;
  font-size: 24px;
  color: var(--white);
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.cu-empty-p {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
  max-width: 520px;
  margin: 0 auto 28px auto;
}
.cu-empty-btn {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--white);
  color: #e9f0f4;
  border: none;
  border-radius: var(--radius);
  padding: 14px 28px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px rgba(4, 31, 40, 0.15);
}
.cu-empty-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(4, 31, 40, 0.22);
}

/* ---- State B — builder shell --------------------------------------- */
/* On desktop with picker open: 2-column grid (main + side drawer).
   On desktop with picker closed: single column.
   On mobile: always single column; picker overlays as a modal. */
.cu-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 901px) {
  .cu-workspace--with-picker {
    grid-template-columns: 1fr 380px;
  }
}
.cu-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* ---- State banner --------------------------------------------------- */
.cu-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #e9f0f4;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px -2px rgba(4, 31, 40, 0.06);
}
.cu-banner-left,
.cu-banner-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cu-status-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.cu-status-pill--draft {
  background: var(--raised-2);
  color: var(--grey);
}
.cu-progress {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey-dim);
}
.cu-save-indicator {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-dim);
  font-style: italic;
  min-width: 100px;
  text-align: right;
}
.cu-save-indicator--saving { color: var(--grey); }
.cu-save-indicator--saved { color: var(--grey-dim); }
.cu-save-indicator--error { color: #c44; font-style: normal; font-weight: 600; }
.cu-discard-btn {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--grey-dim);
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, border-color .15s ease;
}
.cu-discard-btn:hover {
  color: #c44;
  border-color: #c44;
}

/* ---- Intro textarea ------------------------------------------------- */
.cu-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cu-intro-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.cu-intro-counter {
  font-weight: 400;
  color: var(--grey-dim);
  font-variant-numeric: tabular-nums;
}
.cu-intro-input {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--white);
  background: #e9f0f4;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  resize: vertical;
  min-height: 80px;
  width: 100%;
  transition: border-color .15s ease;
}
.cu-intro-input:focus {
  outline: none;
  border-color: var(--white);
}

/* ---- Slots list ----------------------------------------------------- */
.cu-slots-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cu-slot {
  display: grid;
  grid-template-columns: 32px 64px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 12px;
  background: #e9f0f4;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px -1px rgba(4, 31, 40, 0.05);
  min-width: 0;
}
.cu-slot--empty {
  grid-template-columns: 32px 1fr;
  background: transparent;
  border: 1.5px dashed var(--line-soft);
  box-shadow: none;
  padding: 14px 12px;
}
.cu-slot-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--grey-dim);
  text-align: center;
  line-height: 1;
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.cu-slot--empty .cu-slot-num {
  color: var(--grey-dim);
  opacity: 0.6;
}
.cu-slot-empty-btn {
  background: transparent;
  border: none;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  padding: 0;
  transition: color .15s ease;
}
.cu-slot-empty-btn:hover {
  color: var(--white);
}
.cu-slot-cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--line-soft);
  flex-shrink: 0;
}
.cu-slot-cover--empty {
  background: var(--line-soft);
}
.cu-slot-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cu-slot-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cu-slot-artist {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cu-slot-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.cu-slot-comment-wrap {
  margin-top: 8px;
}
.cu-slot-comment-btn {
  background: transparent;
  border: none;
  color: var(--grey-dim);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 0;
  transition: color .15s ease;
}
.cu-slot-comment-btn:hover {
  color: var(--white);
}
.cu-comment-input {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--white);
  background: var(--raised-2);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  resize: vertical;
  min-height: 44px;
  width: 100%;
  transition: border-color .15s ease;
}
.cu-comment-input:focus {
  outline: none;
  border-color: var(--white);
}
.cu-slot-actions {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.cu-slot-remove-btn {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--grey-dim);
  font-size: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, border-color .15s ease;
}
.cu-slot-remove-btn:hover {
  color: #c44;
  border-color: #c44;
}

/* ---- Bottom action bar --------------------------------------------- */
.cu-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0 4px 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
.cu-browse-btn,
.cu-schedule-btn {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  padding: 12px 20px;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.cu-browse-btn {
  background: var(--raised-2);
  color: var(--white);
  border: 1px solid var(--line-soft);
}
.cu-browse-btn:hover {
  transform: translateY(-1px);
}
.cu-schedule-btn {
  background: var(--white);
  color: #e9f0f4;
  border: none;
  margin-left: auto;
}
.cu-schedule-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.cu-schedule-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cu-schedule-hint {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey-dim);
  text-align: right;
  margin: 0;
}

/* ---- Picker drawer (desktop side / mobile modal) ------------------- */
.cu-picker {
  background: #e9f0f4;
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 20px -6px rgba(4, 31, 40, 0.12),
              0 4px 10px -2px rgba(4, 31, 40, 0.06);
  max-height: 70vh;
  overflow: hidden;
}
.cu-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cu-picker-title {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.cu-picker-close {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--grey-dim);
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, border-color .15s ease;
}
.cu-picker-close:hover {
  color: var(--white);
  border-color: var(--white);
}
.cu-picker-search {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--white);
  background: var(--raised-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 14px;
  width: 100%;
  transition: border-color .15s ease;
}
.cu-picker-search:focus {
  outline: none;
  border-color: var(--white);
}
.cu-picker-search::placeholder {
  color: var(--grey-dim);
  font-style: italic;
}
.cu-picker-full-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey);
  margin: 0;
  padding: 6px 8px;
  background: var(--raised-2);
  border-radius: 4px;
}
.cu-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cu-picker-empty {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  text-align: center;
  padding: 20px 0;
  font-style: italic;
}
.cu-picker-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px;
  border-radius: 6px;
  transition: background .15s ease;
}
.cu-picker-row:hover {
  background: rgba(4, 31, 40, 0.04);
}
.cu-picker-row--added {
  opacity: 0.6;
}
.cu-picker-row-cover {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--line-soft);
}
.cu-picker-row-cover--empty {
  background: var(--line-soft);
}
.cu-picker-row-info {
  min-width: 0;
}
.cu-picker-row-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cu-picker-row-artist {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cu-picker-row-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--grey-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cu-picker-row-btn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: var(--white);
  color: #e9f0f4;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.cu-picker-row-btn:hover:not(:disabled) {
  opacity: 0.85;
}
.cu-picker-row-btn:disabled {
  cursor: default;
}
.cu-picker-row-btn--added {
  background: var(--raised-2);
  color: var(--grey);
  font-style: italic;
}
.cu-picker-more-btn {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey);
  background: transparent;
  border: 1px dashed var(--line-soft);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.cu-picker-more-btn:hover {
  color: var(--white);
  border-color: var(--white);
}

/* ---- Mobile: picker becomes a full-screen modal -------------------- */
@media (max-width: 900px) {
  .cu-workspace--with-picker {
    grid-template-columns: 1fr;
  }
  .cu-picker {
    position: fixed;
    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-height: none;
    z-index: 200;
  }
}

/* ---- Mobile slot adjustments --------------------------------------- */
@media (max-width: 720px) {
  .cu-slot {
    grid-template-columns: 28px 52px 1fr auto;
    gap: 10px;
    padding: 10px;
  }
  .cu-slot--empty {
    grid-template-columns: 28px 1fr;
  }
  .cu-slot-num {
    font-size: 15px;
  }
  .cu-slot-cover {
    width: 52px;
    height: 52px;
  }
  .cu-banner {
    flex-wrap: wrap;
  }
  .cu-banner-right {
    flex-basis: 100%;
    justify-content: space-between;
  }
  .cu-save-indicator {
    text-align: left;
    min-width: 0;
  }
  .cu-bottom-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .cu-schedule-btn {
    margin-left: 0;
  }
  .cu-schedule-hint {
    text-align: center;
  }
}


/* ====================================================================
   Phase H.2.b+ — Listen-on-click for picker rows + filled slots
   ----------------------------------------------------------------------
   Clicking the cover + info area of either a picker row or a filled
   workspace slot opens the existing record modal via the standard
   `location.hash = "#r=N"` convention used elsewhere in the app
   (orbit, hero, top list). The modal handles in-app snippet streaming
   when available, or links out to the source store.
   
   The clickable areas get a cursor change + subtle hover state. The
   ADD button (in picker) and REMOVE × + comment textarea (in slots)
   live OUTSIDE the clickable wrappers so they remain independent
   click targets — no event-bubbling conflicts.
   
   Filled slots become a 2-row layout: top row = num | cover+info |
   remove ×, bottom row = comment area (spans full width).
   ==================================================================== */

/* --- Filled slot: refactored to 2-row layout ----------------------- */
.cu-slot--filled {
  /* Override the old single-row grid — now flex column with two rows */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cu-slot-row-main {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.cu-slot-clickable {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
  min-width: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px;
  margin: -2px;
  transition: background .15s ease;
}
.cu-slot-clickable:hover {
  background: rgba(4, 31, 40, 0.04);
}
/* The comment wrap on filled slots is now full-width on its own row,
   no longer nested inside cu-slot-info. Reset its inherited margin. */
.cu-slot--filled .cu-slot-comment-wrap {
  margin-top: 0;
  /* Indent the comment to align under the title (past the slot number
     column = 32px + 14px gap = 46px). */
  padding-left: 46px;
}

/* --- Picker row: cover + info wrapped, button stays right --------- */
.cu-picker-row {
  /* Override 3-col grid with 2-col: clickable wrapper takes 1fr */
  grid-template-columns: 1fr auto;
}
.cu-picker-row-clickable {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px;
  margin: -2px;
  transition: background .15s ease;
}
.cu-picker-row-clickable:hover {
  background: rgba(4, 31, 40, 0.06);
}

/* --- Mobile adjustments ------------------------------------------- */
@media (max-width: 720px) {
  .cu-slot-row-main {
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
  }
  .cu-slot-clickable {
    grid-template-columns: 52px 1fr;
    gap: 10px;
  }
  .cu-slot--filled .cu-slot-comment-wrap {
    /* Tighter mobile indent: 28px + 10px = 38px */
    padding-left: 38px;
  }
}


/* ====================================================================
   Phase H.2.c — Scheduling, State C (scheduled view), edit-while-scheduled,
   schedule modal + week-picker calendar
   ----------------------------------------------------------------------
   New elements:
     - .cu-status-pill--scheduled  : the "Scheduled" pill (warmer tone)
     - .cu-countdown-banner        : "publishes Friday DD MMM · 11:11 Paris"
     - .cu-intro-readonly          : read-only intro paragraph in State C
     - .cu-slot--readonly          : slot card with no remove/comment-edit
     - .cu-slot-comment-readonly   : displayed comment under a read-only slot
     - .cu-unschedule-btn          : secondary button in State C bottom bar
     - .cu-edit-locked             : "edit used" hint in State C banner
     - .cu-edit-warning            : amber banner shown when editingScheduled
     - .cu-modal-backdrop / .cu-modal : full-screen modal overlay
     - .cu-modal-summary / .cu-modal-warning : modal copy blocks
     - .cu-modal-cal / .cu-cal-row : week-picker calendar list
   ==================================================================== */

/* ---- Scheduled pill (warmer tone than draft) ---------------------- */
.cu-status-pill--scheduled {
  background: #d4b483;
  color: #2a1f0d;
}

/* ---- Countdown banner --------------------------------------------- */
.cu-countdown-banner {
  background: linear-gradient(135deg, #d4b483 0%, #c5a373 100%);
  color: #2a1f0d;
  padding: 14px 16px;
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px -2px rgba(212, 180, 131, 0.30);
}
.cu-countdown-text {
  display: inline-block;
}

/* ---- Edit-mode warning banner ------------------------------------- */
.cu-edit-warning {
  background: #fef2d6;
  color: #6b4f1d;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  border-left: 3px solid #d4b483;
}

/* ---- Edit-locked label in State C banner -------------------------- */
.cu-edit-locked {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grey);
  font-style: italic;
}

/* ---- Read-only intro display ------------------------------------- */
.cu-intro-readonly {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--white);
  background: #e9f0f4;
  padding: 14px 16px;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px -1px rgba(4, 31, 40, 0.05);
  white-space: pre-wrap;
}

/* ---- Read-only slot (no remove × button, no comment editor) ------- */
.cu-slot--readonly {
  /* Same look as cu-slot--filled but tighter visual finality. */
  background: #e9f0f4;
}
.cu-slots-list--readonly {
  /* No visible difference vs the editable one — same gap, same wrap.
     This selector exists for potential future tweaks. */
}
.cu-slot-comment-readonly {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey);
  padding: 4px 0 4px 46px;
  font-style: italic;
}
/* Read-only slot uses 2-col main row (num | clickable) since there's
   no remove button column. */
.cu-slot--readonly .cu-slot-row-main {
  grid-template-columns: 32px 1fr;
}

/* ---- Unschedule button in State C --------------------------------- */
.cu-unschedule-btn {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--grey);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 20px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.cu-unschedule-btn:hover {
  color: #c44;
  border-color: #c44;
}

/* ---- Schedule modal overlay --------------------------------------- */
.cu-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 31, 40, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: cuBackdropFade .18s ease;
}
@keyframes cuBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cu-modal {
  background: linear-gradient(135deg, rgba(232, 241, 245, 0.97) 0%, rgba(194, 221, 231, 0.94) 100%);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    0 24px 60px -10px rgba(4, 31, 40, 0.30),
    0 12px 28px -6px rgba(4, 31, 40, 0.18);
  animation: cuModalPop .22s ease;
}
@keyframes cuModalPop {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.cu-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cu-modal-title {
  font-family: var(--heading);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
  text-transform: uppercase;
}
.cu-modal-close {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--grey-dim);
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, border-color .15s ease;
}
.cu-modal-close:hover {
  color: var(--white);
  border-color: var(--white);
}
.cu-modal-summary {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  margin: 0;
}
.cu-modal-warning {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: #6b4f1d;
  background: #fef2d6;
  padding: 12px 14px;
  border-radius: 6px;
  border-left: 3px solid #d4b483;
}
.cu-modal-warning strong {
  font-weight: 700;
  margin-right: 4px;
}
.cu-modal-pick-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 4px 0 0 0;
}
.cu-modal-cal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  padding: 4px;
}
.cu-modal-loading {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  text-align: center;
  padding: 24px 0;
  font-style: italic;
  margin: 0;
}

/* ---- Calendar row ------------------------------------------------- */
.cu-cal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease;
}
.cu-cal-row:hover:not(.cu-cal-row--taken) {
  background: rgba(4, 31, 40, 0.05);
}
.cu-cal-row--taken {
  cursor: not-allowed;
  opacity: 0.5;
}
.cu-cal-row--selected {
  background: rgba(212, 180, 131, 0.25);
  outline: 2px solid #d4b483;
  outline-offset: -2px;
}
.cu-cal-row--selected:hover:not(.cu-cal-row--taken) {
  background: rgba(212, 180, 131, 0.30);
}
.cu-cal-row-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cu-cal-friday {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}
.cu-cal-week-iso {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--grey-dim);
  letter-spacing: 0.06em;
}
.cu-cal-status {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: lowercase;
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 4px;
}
.cu-cal-status--avail {
  color: #2a5a3a;
  background: rgba(80, 160, 100, 0.18);
}
.cu-cal-status--taken {
  color: var(--grey-dim);
  background: transparent;
  font-style: italic;
}

.cu-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ---- Mobile modal adjustments ------------------------------------- */
@media (max-width: 720px) {
  .cu-modal-backdrop {
    padding: 12px;
    align-items: flex-start;
    padding-top: 40px;
  }
  .cu-modal {
    max-height: calc(100vh - 60px);
    padding: 18px;
    gap: 12px;
  }
  .cu-modal-title {
    font-size: 16px;
  }
  .cu-modal-cal {
    max-height: 260px;
  }
  .cu-cal-row {
    padding: 8px 10px;
  }
  .cu-cal-friday {
    font-size: 12px;
  }
}

/* ====================================================================
   Phase H.2.c.2 — Multi-scheduled stacked view
   --------------------------------------------------------------------
   Curator workspace now stacks:
     - Scheduled lists at the top  (.cu-sched-stack with compact cards)
     - Draft area below            (.cu-draft-area: builder | state A |
                                    post-schedule confirmation card)
   No hard lines — elevation via shadow, warm gold (#d4b483) accents on
   scheduled elements to match the existing scheduled pill + countdown
   banner.
   ==================================================================== */

/* ---- Stacked layout container ------------------------------------- */
.cu-stacked {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cu-section-divider {
  /* Subtle breathing room between scheduled stack and draft area. No
     visible line — the shadow on each card already provides separation. */
  height: 4px;
}

/* ---- Scheduled stack section ------------------------------------- */
.cu-sched-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cu-sched-stack-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 4px 4px;
}
.cu-sched-stack-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.cu-sched-stack-count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #2a1f0d;
  background: #d4b483;
  padding: 3px 8px;
  border-radius: 999px;
}

/* ---- Compact scheduled card -------------------------------------- */
.cu-sched-card {
  background: #e9f0f4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px -3px rgba(4, 31, 40, 0.08),
              0 2px 6px -1px rgba(4, 31, 40, 0.05),
              0 1px 2px rgba(4, 31, 40, 0.04);
}
.cu-sched-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(4, 31, 40, 0.12),
              0 4px 10px -2px rgba(4, 31, 40, 0.07),
              0 2px 4px rgba(4, 31, 40, 0.05);
}
.cu-sched-card--expanded {
  /* Slightly stronger elevation when open so the card reads as "in focus". */
  box-shadow: 0 10px 24px -6px rgba(4, 31, 40, 0.14),
              0 5px 12px -2px rgba(4, 31, 40, 0.08),
              0 2px 5px rgba(4, 31, 40, 0.05);
}

/* Top row: status pill + when (left) | locked label + chevron (right) */
.cu-sched-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cu-sched-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.cu-sched-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cu-sched-when {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
}
.cu-sched-relative {
  font-style: italic;
  font-weight: 400;
  color: var(--grey);
}
.cu-sched-chevron {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey);
  line-height: 1;
  transition: color .15s ease;
}
.cu-sched-card:hover .cu-sched-chevron {
  color: var(--white);
}

/* Intro snippet — small italic preview under the head row */
.cu-sched-intro-snippet {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey);
  font-style: italic;
  padding: 0 2px;
}

/* Expanded content area inside the card */
.cu-sched-expanded {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

/* Bottom button row inside the card */
.cu-sched-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.cu-sched-actions .cu-unschedule-btn,
.cu-sched-actions .cu-schedule-btn {
  font-size: 11px;
  padding: 8px 14px;
}

/* ---- Post-schedule confirmation card ----------------------------- */
.cu-post-sched-card {
  background: #e9f0f4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px -6px rgba(4, 31, 40, 0.10),
              0 4px 10px -2px rgba(4, 31, 40, 0.06),
              0 2px 4px rgba(4, 31, 40, 0.04);
}
.cu-post-sched-icon {
  font-size: 40px;
  line-height: 1;
  color: #d4b483;
  margin-bottom: 4px;
}
.cu-post-sched-h {
  font-family: var(--heading);
  font-weight: 900;
  font-size: 20px;
  color: var(--white);
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.cu-post-sched-p {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
  max-width: 440px;
  margin: 0 0 20px 0;
}
.cu-post-sched-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Mobile adjustments (≤720px) --------------------------------- */
@media (max-width: 720px) {
  .cu-stacked {
    gap: 20px;
  }
  .cu-sched-card {
    padding: 14px 14px;
    gap: 8px;
  }
  .cu-sched-head {
    gap: 8px;
  }
  .cu-sched-when {
    font-size: 11px;
  }
  .cu-sched-intro-snippet {
    font-size: 11px;
  }
  .cu-sched-actions {
    gap: 8px;
  }
  .cu-sched-actions .cu-unschedule-btn,
  .cu-sched-actions .cu-schedule-btn {
    flex: 1 1 auto;
    text-align: center;
  }
  .cu-post-sched-card {
    padding: 32px 20px;
  }
  .cu-post-sched-icon {
    font-size: 36px;
  }
  .cu-post-sched-h {
    font-size: 18px;
  }
  .cu-post-sched-actions {
    flex-direction: column;
    width: 100%;
  }
  .cu-post-sched-actions .cu-browse-btn,
  .cu-post-sched-actions .cu-schedule-btn {
    width: 100%;
  }
}

/* ======================================================================
   PHASE 3a — LISTENING ROOMS (list + create modal)
   ----------------------------------------------------------------------
   Built on the existing token system: --glass-* tiers, --accent, --ink,
   --radius. Reuses .glass / .glass-strong surfaces and .sec-btn buttons
   from elsewhere in the system; only room-specific layout is new here.
   ====================================================================== */

.rooms-root { display: block; }

.rooms-loading,
.rooms-error {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-dim);
  padding: 40px 8px;
  text-align: center;
}
.rooms-error p { margin-bottom: 14px; }

/* ---- header ---- */
.rooms-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.rooms-title {
  font-family: var(--display);
  font-weight: var(--text-display-weight);
  font-size: var(--text-display-size);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.rooms-subtitle {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-dim);
  margin-top: 8px;
}
.rooms-new-btn { white-space: nowrap; }

/* ---- empty state ---- */
.rooms-empty {
  padding: 40px 28px;
  text-align: center;
  border-radius: var(--radius);
}
.rooms-empty-h {
  font-family: var(--display);
  font-weight: var(--text-heading-weight);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.rooms-empty-p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--grey-dim);
  max-width: 360px;
  margin: 0 auto 18px;
}

/* ---- grid + cards ---- */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}
.room-card {
  border: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: block;
  width: 100%;
}
.room-card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-strong); }
.room-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.room-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1.9 / 1;
  background: var(--ink);
  gap: 1px;
}
.room-tile {
  background-color: #0a2e38;
  background-size: cover;
  background-position: center;
}
.room-tile-empty {
  background-image:
    linear-gradient(135deg, rgba(33,77,92,0.55) 0%, rgba(4,31,40,0.85) 100%);
}

.room-body { padding: 13px 15px 15px; }
.room-name {
  font-family: var(--display);
  font-weight: var(--text-heading-weight);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.room-meta {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-dim);
  margin-top: 7px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.room-pills { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.room-pill {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(33, 77, 92, 0.1);
  color: var(--accent);
}
.room-pill.creator { background: var(--accent); color: #fff; }

/* ---- create modal ---- */
.rooms-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 31, 40, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.rooms-modal {
  max-width: 420px;
  width: 100%;
  padding: 24px;
  border-radius: var(--radius);
}
.rooms-modal-h {
  font-family: var(--display);
  font-weight: var(--text-display-weight);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.rooms-modal-sub {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-dim);
  margin-bottom: 18px;
}
.rooms-field-label {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-dim);
  margin: 14px 0 6px;
}
.rooms-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(4, 31, 40, 0.15);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  outline: none;
}
.rooms-field:focus { border-color: var(--accent); }
.rooms-seg { display: flex; gap: 6px; margin-top: 6px; }
.rooms-seg-btn {
  flex: 1;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px;
  border: 1px solid rgba(4, 31, 40, 0.15);
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--grey-dim);
  transition: 0.15s;
}
.rooms-seg-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.rooms-hint {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--grey-dim);
  margin-top: 9px;
}
.rooms-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  justify-content: flex-end;
}

/* ---- toast ---- */
.rooms-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 18px;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1100;
}
.rooms-toast.show { opacity: 1; }

@media (max-width: 560px) {
  .rooms-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   PHASE 3b — ROOM DETAIL (hero · record rows · embed · members · picker)
   ====================================================================== */

.rooms-crumb {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 14px;
  transition: color 0.15s;
}
.rooms-crumb:hover { color: var(--accent); }

/* ---- cinematic hero ---- */
.room-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 22px;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
}
.room-hero-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  opacity: 0.5;
}
.room-hero-tile { background-size: cover; background-position: center; background-color: #0a2e38; }
.room-hero-tile--empty {
  background-image: linear-gradient(135deg, rgba(33,77,92,0.5), rgba(4,31,40,0.85));
}
.room-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
    rgba(4,31,40,0.94) 0%, rgba(4,31,40,0.5) 55%, rgba(4,31,40,0.35) 100%);
}
.room-hero-inner {
  position: relative;
  padding: 26px 28px;
  color: #fff;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.room-hero-title {
  font-family: var(--display);
  font-weight: var(--text-display-weight);
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 0.98;
  color: #fff;
}
.room-hero-desc { font-size: 12px; opacity: 0.85; margin-top: 10px; max-width: 440px; line-height: 1.5; }
.room-hero-stats {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 14px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.room-avatars { display: flex; }

/* ---- avatars ---- */
.room-av {
  width: 26px; height: 26px;
  border-radius: 99px;
  border: 1.5px solid rgba(4,31,40,0.85);
  margin-left: -8px;
  background-color: #2a5566;
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 8px; color: #fff;
}
.room-av:first-child { margin-left: 0; }
.room-av--more { background: rgba(4,31,40,0.6); }

/* ---- two-column layout ---- */
.room-cols {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 24px;
  align-items: start;
}
.room-section-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-dim);
  margin: 0 2px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ---- record rows (Apple-Music-for-records) ---- */
.room-rec-list { display: flex; flex-direction: column; gap: 6px; }
.room-rec {
  border-radius: var(--radius);
  transition: background 0.15s;
}
.room-rec:hover { background: rgba(255,255,255,0.5); }
.room-rec.expanded { background: rgba(255,255,255,0.55); }
.room-rec-main { display: flex; align-items: center; gap: 13px; padding: 9px 12px; }
.room-rec-play { position: relative; width: 52px; height: 52px; flex-shrink: 0; cursor: pointer; border-radius: 2px; overflow: hidden; }
.room-rec-cover {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 2px 8px rgba(4,31,40,0.18);
  display: block;
}
.room-rec-cover--empty {
  background: linear-gradient(135deg, rgba(33,77,92,0.5), rgba(4,31,40,0.85));
}
.room-rec-pi {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,31,40,0.32);
  color: #fff; font-size: 17px;
  opacity: 0; transition: opacity 0.15s;
}
.room-rec-play:hover .room-rec-pi { opacity: 1; }
.room-rec-info { flex: 1; min-width: 0; }
.room-rec-title {
  font-family: var(--display); font-weight: var(--text-heading-weight);
  font-size: 13px; letter-spacing: -0.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room-rec-artist {
  font-size: 11px; color: var(--grey-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.room-rec-label {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-faint); margin-top: 4px;
}
.room-rec-added {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-faint); margin-top: 3px;
}
.room-rec-actions { display: flex; gap: 6px; flex-shrink: 0; }
.room-rec-icon {
  width: 30px; height: 30px;
  border-radius: var(--radius);
  border: 1px solid rgba(4,31,40,0.12);
  background: transparent;
  color: var(--grey-dim);
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: 0.15s;
}
.room-rec-icon:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.5); }
.room-rec-icon--danger:hover { border-color: #a3302d; color: #a3302d; }
.room-rec-embed {
  margin: 0 12px 12px;
  border-radius: 2px; overflow: hidden;
  aspect-ratio: 16 / 9; background: #000;
}
.room-rec-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- members panel ---- */
.room-members { border-radius: var(--radius); padding: 8px; }
.room-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--radius);
}
.room-member-row:hover { background: rgba(255,255,255,0.4); }
.room-member-row .room-av { margin-left: 0; }
.room-member-handle {
  flex: 1; font-family: var(--display); font-weight: var(--text-heading-weight);
  font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- discussion placeholder ---- */
.room-disc-placeholder {
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
}
.room-disc-placeholder p {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-faint); line-height: 1.6;
}

/* ---- add-record picker ---- */
.rooms-modal--wide { max-width: 520px; }
.room-add-results { margin-top: 12px; max-height: 360px; overflow-y: auto; }
.room-add-grouplabel {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grey-faint);
  margin: 6px 2px 8px;
}
.room-add-hint {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-faint);
  text-align: center; padding: 26px 8px;
}
.room-add-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; border-radius: var(--radius);
}
.room-add-row:hover { background: rgba(255,255,255,0.5); }
.room-add-cover {
  width: 42px; height: 42px; flex-shrink: 0; object-fit: cover;
  border-radius: 2px; background: var(--ink);
}
.room-add-cover--empty { background: linear-gradient(135deg, rgba(33,77,92,0.5), rgba(4,31,40,0.85)); }
.room-add-info { flex: 1; min-width: 0; }
.room-add-title {
  font-family: var(--display); font-weight: var(--text-heading-weight);
  font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room-add-artist { font-size: 10.5px; color: var(--grey-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-add-meta {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-faint); margin-top: 2px;
}

@media (max-width: 820px) {
  .room-cols { grid-template-columns: 1fr; }
}

/* ======================================================================
   PHASE 3c — DISCUSSION THREAD · INVITE · CREATE-MODAL SEED
   ====================================================================== */

/* ---- thread ---- */
.room-thread {
  border-radius: var(--radius);
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.room-thread-empty {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-faint);
  text-align: center; padding: 26px 8px;
}
.room-msg { display: flex; gap: 10px; padding: 9px 8px; border-radius: var(--radius); }
.room-msg:hover { background: rgba(255,255,255,0.4); }
.room-msg .room-av { margin-left: 0; flex-shrink: 0; width: 28px; height: 28px; }
.room-msg-body { flex: 1; min-width: 0; }
.room-msg-head { display: flex; align-items: baseline; gap: 8px; }
.room-msg-who {
  font-family: var(--display); font-weight: var(--text-heading-weight);
  font-size: 11.5px; color: var(--ink);
}
.room-msg-when {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-faint);
}
.room-msg-text { font-size: 12px; line-height: 1.5; color: var(--ink); margin-top: 3px; word-wrap: break-word; }

/* ---- composer ---- */
.room-composer {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-top: 8px;
  border-radius: var(--radius);
}
.room-composer-input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--body); font-size: 12px; color: var(--ink); outline: none;
}
.room-composer-input::placeholder { color: var(--grey-faint); }

/* ---- invite modal ---- */
.room-invite-row { display: flex; gap: 8px; margin-top: 6px; }
.room-invite-row .rooms-field { flex: 1; }
.rooms-divider {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grey-faint);
}
.rooms-divider::before, .rooms-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(4,31,40,0.1);
}
.room-invite-link-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.room-invite-link-label {
  flex: 1; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-dim);
}
.room-invite-link-input { flex: 1; font-family: var(--mono); font-size: 9px; letter-spacing: 0.01em; }

/* ---- create-modal seed chips ---- */
.room-seed { margin-top: 4px; }
.room-seed-grouplabel {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grey-faint); margin: 4px 2px 8px;
}
.room-seed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.room-seed-chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
  padding: 6px 11px; border-radius: 99px;
  border: 1px solid rgba(4,31,40,0.15); background: transparent;
  color: var(--grey-dim); cursor: pointer; transition: 0.15s;
}
.room-seed-chip:hover { border-color: var(--accent); color: var(--accent); }
.room-seed-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }