/* Membership panel for the comms drawer (web/account.js). Same look as web/style.css:
   --neon #2de2e6, --pink #ff3d8b, --line rgba(170,150,255,.2), panel rgba(9,8,22,.74),
   Pixelify Sans, square 1px borders, no rounding, no shadows. It uses the site's variables when
   they exist and falls back to the same values, so it also works on its own. */
#account {
  --a-bg: var(--bg, #05040f);
  --a-neon: var(--neon, #2de2e6);
  --a-pink: var(--pink, #ff3d8b);
  --a-line: var(--line, rgba(170, 150, 255, 0.2));
  --a-text: var(--text, #ece8ff);
  --a-dim: var(--dim, #a29bcf);
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--a-line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--a-text);
  font-family: 'Tiny5', 'Pixelify Sans', ui-monospace, 'Cascadia Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}
#account[data-state='loading'] { color: var(--a-dim); }
#account[hidden] { display: none; } /* the membership service did not answer: nothing to offer */
#account p { margin: 0; overflow-wrap: anywhere; }

/* Google's own button (Google Identity Services draws it in an iframe); the space is kept so the panel does not jump */
#account .acct-google { display: flex; align-items: center; min-height: 40px; min-width: 0; overflow: hidden; }
#account .acct-google:empty::before { content: 'loading Google sign-in...'; font-size: 12px; color: var(--a-dim); }
#account .acct-or { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.12em; color: var(--a-dim); }
#account .acct-or::before,
#account .acct-or::after { content: ''; flex: 1; height: 1px; background: var(--a-line); }

/* the small pixel lock in front of "Members: favorites, playlists and chat. Opening soon." (here and in the songs sheet);
   drawn with the text's own colour through a mask, so it follows the line it sits in */
#account .acct-lock::before,
#songList .lw-lock::before {
  content: '';
  display: inline-block;
  flex: none;
  width: 7px;
  height: 8px;
  margin-right: 6px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8'%3E%3Cpath fill-rule='evenodd' d='M2 0h3v1H2zM1 1h1v2H1zM5 1h1v2H5zM0 3h7v5H0zM3 4h1v2H3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8'%3E%3Cpath fill-rule='evenodd' d='M2 0h3v1H2zM1 1h1v2H1zM5 1h1v2H5zM0 3h7v5H0zM3 4h1v2H3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#account .acct-lock { color: var(--a-dim); }
#songList .lw-b.lw-lock::before { margin-right: 0; } /* the tabs already space their parts */

#account .acct-title { font-size: 12px; letter-spacing: 0.12em; color: var(--a-neon); }
#account .acct-name { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--a-pink); }
#account .acct-badge { display: inline-block; padding: 0 5px; font-size: 10px; line-height: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-bg); background: var(--a-neon); }
#account .acct-line { color: var(--a-dim); }
#account .acct-bad { color: var(--a-pink); }
#account .acct-fine { font-size: 11px; color: var(--a-dim); }
#account .acct-fine a { color: var(--a-neon); }
#account .acct-rules { font-size: 11px; color: var(--a-dim); }

/* one line for what just happened; it keeps its height so the panel does not jump */
#account .acct-status { min-height: 1.4em; color: var(--a-dim); }
#account .acct-status.good { color: var(--a-neon); }
#account .acct-status.bad { color: var(--a-pink); }
/* the payment or billing page could not open a new tab by itself: this link does, in one press */
#account .acct-status a { color: var(--a-neon); }
#account .acct-status a:hover { color: #fff; }
#account .acct-status a:focus-visible { outline: 2px solid var(--a-neon); outline-offset: 2px; }

#account .acct-row { display: flex; gap: 6px; min-width: 0; }
#account input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  color: var(--a-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--a-line);
  border-radius: 0;
  padding: 6px 8px;
}
#account input::placeholder { color: var(--a-dim); opacity: 0.8; }
#account input:focus { outline: none; border-color: var(--a-neon); }

#account .acct-btn {
  flex: none;
  font: inherit;
  font-size: 13px;
  color: var(--a-text);
  background: transparent;
  border: 1px solid var(--a-line);
  border-radius: 0;
  padding: 6px 10px;
  cursor: pointer;
}
#account .acct-btn:hover:not(:disabled) { border-color: var(--a-neon); color: var(--a-neon); }
#account .acct-btn:focus-visible,
#account .acct-link:focus-visible { outline: 2px solid var(--a-neon); outline-offset: 2px; }
#account .acct-btn:disabled { opacity: 0.5; cursor: default; }
#account .acct-primary { color: var(--a-bg); background: var(--a-neon); border-color: var(--a-neon); }
#account a.acct-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* My Profile: a link that looks like the buttons */
#account .acct-primary:hover:not(:disabled) { color: var(--a-bg); border-color: #fff; }
#account .acct-warn { color: var(--a-pink); border-color: var(--a-pink); }
#account .acct-warn:hover:not(:disabled) { color: #fff; border-color: #fff; }
/* "Create free account": the neon outline, second only to the solid Join button above it */
#account .acct-alt { color: var(--a-neon); border-color: var(--a-neon); }
#account .acct-alt:hover:not(:disabled) { color: #fff; border-color: #fff; }
/* Create free account and Sign in share their row, each as wide as it can be */
#account .acct-pair { flex-wrap: wrap; }
#account .acct-pair .acct-btn { flex: 1 1 auto; padding-top: 8px; padding-bottom: 8px; }

/* a button that reads as a text link, light enough to find on the dark panel */
#account .acct-link {
  justify-self: start;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--a-text);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--a-neon);
  text-underline-offset: 3px;
  cursor: pointer;
}
#account .acct-link:hover { color: var(--a-neon); }
/* "new here? create a free account" under a sign-in card, and the other way round */
#account .acct-switch { color: var(--a-dim); }
#account .acct-switch .acct-link { color: var(--a-neon); }
#account .acct-switch .acct-link:hover { color: #fff; }

/* ---------------------------------------------------------------------------------------------------------------
   Favorites and playlists in the songs sheet (web/songs-library.js). Everything sits inside #songList and every class
   starts with lw-. The sheet's own rules style every button in #songList as a song row, so the controls here say what they
   are and win by being more specific. */
#songList {
  --a-bg: var(--bg, #05040f);
  --a-neon: var(--neon, #2de2e6);
  --a-pink: var(--pink, #ff3d8b);
  --a-line: var(--line, rgba(170, 150, 255, 0.2));
  --a-text: var(--text, #ece8ff);
  --a-dim: var(--dim, #a29bcf);
}
#songList [hidden] { display: none !important; }

/* the bar above the list: three views, what is playing, and one line of news */
#songList .lw-bar {
  position: sticky;
  top: -4px;
  z-index: 2;
  display: grid;
  gap: 4px;
  margin: -4px -8px 4px;
  padding: 8px 8px 6px;
  background: rgba(9, 8, 22, 0.96);
  border-bottom: 1px solid var(--a-line);
}
#songList .lw-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
#songList .lw-running { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--a-neon); }
#songList .lw-running i { flex: 1; min-width: 0; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#songList .lw-note { min-height: 1.3em; margin: 0; font-size: 12px; color: var(--a-dim); }
#songList .lw-note.good { color: var(--a-neon); }
#songList .lw-note.bad { color: var(--a-pink); }

/* a plain button */
#songList .lw-b {
  width: auto;
  display: inline-flex;
  grid-template-columns: none;
  grid-template-areas: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  column-gap: 6px;
  text-align: center;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--a-text);
  background: transparent;
  border: 1px solid var(--a-line);
  border-radius: 0;
  padding: 4px 9px;
  cursor: pointer;
}
#songList .lw-b:hover:not(:disabled) { color: var(--a-neon); border-color: var(--a-neon); background: transparent; }
#songList .lw-b:disabled { opacity: 0.45; cursor: default; }
#songList .lw-b.on { color: var(--a-neon); border-color: var(--a-neon); }
#songList .lw-primary { color: var(--a-bg); background: var(--a-neon); border-color: var(--a-neon); }
#songList .lw-primary:hover:not(:disabled) { color: var(--a-bg); background: var(--a-neon); border-color: #fff; }
#songList .lw-off { opacity: 0.55; }
#songList .lw-n { font-style: normal; font-size: 11px; color: var(--a-dim); }
#songList .lw-tab.on .lw-n { color: var(--a-neon); }


/* ---- a song row: the grip on the left (members), the "+" and the heart on the right, out of the way of the row's own button */
#songList .lw-row { position: relative; }
#songList .lw-row > button:first-child { padding-right: 44px; }
#songList.lw-member .lw-row > button:first-child { padding-left: 26px; padding-right: 78px; }
#songList .lw-heart,
#songList .lw-plus {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  grid-template-columns: none;
  grid-template-areas: none;
  color: var(--a-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
}
#songList .lw-heart { right: 4px; }
#songList .lw-plus { right: 40px; }
#songList .lw-heart svg { display: block; width: 18px; height: 16px; }
#songList .lw-plus svg { display: block; width: 10px; height: 10px; }
#songList .lw-heart:hover { color: var(--a-pink); background: none; border-color: var(--a-line); }
#songList .lw-plus:hover,
#songList .lw-plus[aria-expanded='true'] { color: var(--a-neon); background: none; border-color: var(--a-line); }
#songList .lw-heart.on { color: var(--a-pink); }
#songList .lw-tr .lw-heart { position: static; transform: none; flex: none; } /* in an open playlist the heart sits in the row, before the x */
#songList .lw-heart.lw-off { opacity: 0.45; }
#songList .lw-heart.lw-off:hover { opacity: 1; color: var(--a-dim); }

/* the grip shows where a song is picked up: a mouse picks up the row anywhere (but its small buttons), a finger holds the row a
   moment first (the grip, a shorter moment). pan-y lets a swipe that starts on it still scroll the list until the hold has made it
   a drag; a long press on a member's row selects no text and opens no callout. */
#songList.lw-member .lw-row,
#songList .lw-tr { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#songList .lw-grip {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 34px;
  color: var(--a-dim);
  opacity: 0.5;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#songList .lw-row .lw-grip { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); }
#songList .lw-grip svg { display: block; width: 6px; height: 14px; }
#songList .lw-row:hover .lw-grip,
#songList .lw-tr:hover .lw-grip { opacity: 1; color: var(--a-neon); }
@media (hover: none) {
  #songList .lw-grip { opacity: 0.85; }
}

/* ---- a member's sheet: the list and their playlists side by side, each scrolling on its own; the sheet takes the width */
#songs:has(#songList.lw-member) { width: min(980px, calc(100vw - 32px)); }
#songList.lw-member { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; padding: 0; }
#songList.lw-member .lw-bar { position: static; margin: 0; padding: 8px 10px 6px; }
#songList.lw-member .lw-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 236px; min-height: 0; }
#songList.lw-member .lw-main,
#songList.lw-member .lw-side { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(170, 150, 255, 0.3) transparent; }
#songList.lw-member .lw-main { padding: 6px 8px 12px; container-type: inline-size; }
#songList.lw-member .lw-main > ul { columns: 1; }
@container (min-width: 540px) {
  #songList.lw-member .lw-main > ul { columns: 2; column-gap: 8px; }
}
#songList .lw-busy .lw-side,
#songList .lw-busy .lw-pview { opacity: 0.75; }

/* the playlists: a column of cards */
#songList.lw-member .lw-side { display: grid; align-content: start; gap: 6px; padding: 8px 10px 12px 8px; border-left: 1px solid var(--a-line); background: rgba(0, 0, 0, 0.18); }
#songList .lw-side-title { margin: 2px 0 0; font-size: 11px; letter-spacing: 0.14em; color: var(--a-pink); }
#songList .lw-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--a-line);
  background: rgba(9, 8, 22, 0.6);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
#songList .lw-card.open { border-color: var(--a-neon); }
#songList .lw-card.playing .lw-card-name { color: var(--a-neon); }
#songList .lw-card.lw-drop-on { border-color: var(--a-pink); background: rgba(255, 61, 139, 0.16); }
#songList .lw-card-open {
  width: auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  align-items: start;
  gap: 1px;
  text-align: left;
  font: inherit;
  color: var(--a-text);
  background: none;
  border: 0;
  padding: 7px 8px;
  cursor: pointer;
}
#songList .lw-card-open:hover { background: rgba(255, 255, 255, 0.04); }
#songList .lw-card-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#songList .lw-card.open .lw-card-name { cursor: text; }
#songList .lw-card-open i { font-style: normal; font-size: 11px; color: var(--a-dim); }
#songList .lw-card-edit,
#songList .lw-card-play {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  grid-template-columns: none;
  grid-template-areas: none;
  color: var(--a-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
}
#songList .lw-card-play { margin-right: 3px; }
#songList .lw-card-edit svg { width: 12px; height: 12px; }
#songList .lw-card-play svg { width: 10px; height: 12px; }
#songList .lw-card-edit:hover,
#songList .lw-card-play:hover:not(:disabled) { color: var(--a-neon); background: none; border-color: var(--a-line); }
#songList .lw-card-play.on { color: var(--a-neon); }
#songList .lw-card-play:disabled { opacity: 0.35; cursor: default; }
#songList .lw-newcard { border-style: dashed; background: none; }
#songList .lw-newcard .lw-card-open b { font-size: 13px; font-weight: 400; color: var(--a-neon); }
#songList .lw-newcard.lw-full .lw-card-open b { color: var(--a-dim); }
#songList .lw-card.lw-editing { display: flex; align-items: center; gap: 6px; padding: 5px; }

/* ---- an open playlist, in the list's place */
#songList .lw-pview { display: grid; gap: 6px; }
#songList .lw-phead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0 8px; border-bottom: 1px solid var(--a-line); }
#songList .lw-phead .lw-name { flex: 1 1 200px; font-size: 15px; }
#songList .lw-title { max-width: 100%; justify-content: flex-start; padding: 3px 6px; font-size: 16px; font-weight: 600; letter-spacing: 0; color: #fff; border-color: transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
#songList .lw-title:hover:not(:disabled) { color: #fff; border-color: var(--a-line); }
#songList .lw-pencil { color: var(--a-dim); border-color: transparent; }
#songList .lw-pencil svg { width: 12px; height: 12px; }
#songList .lw-grow { flex: 1; }
#songList .lw-del.on { color: var(--a-pink); border-color: var(--a-pink); }
#songList .lw-tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; columns: auto; }
#songList .lw-tr { position: relative; display: flex; align-items: center; gap: 4px; }
/* ▲ and ▼ are the keyboard's way to reorder: out of sight (still in the tab order, and read out) until the keyboard is on the
   row, since a mouse or a finger drags the row instead. × always shows. */
#songList .lw-tr:not(:has(:focus-visible)) .lw-mv { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#songList .lw-hint { margin: -2px 0 0; font-size: 11px; color: var(--a-dim); }
#songList .lw-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  #songList .lw-hint-mouse { display: none; }
  #songList .lw-hint-touch { display: inline; }
}
#songList .lw-tr.lw-before { box-shadow: inset 0 2px 0 var(--a-pink); }
#songList .lw-tr.lw-after { box-shadow: inset 0 -2px 0 var(--a-pink); }
#songList .lw-song { flex: 1; min-width: 0; justify-content: flex-start; text-align: left; font-size: 13px; border-color: transparent; }
#songList .lw-song b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#songList .lw-no { min-width: 2ch; font-style: normal; color: var(--a-dim); }
#songList .lw-mini { padding: 3px 7px; font-size: 11px; }

/* ---- the boxes for a name: new playlist, renaming in place, the "+" menu */
#songList .lw-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  color: var(--a-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--a-line);
  border-radius: 0;
  padding: 6px 8px;
}
#songList .lw-input::placeholder { color: var(--a-dim); opacity: 0.8; }
#songList .lw-input:focus { outline: none; border-color: var(--a-neon); }
#songList .lw-name { font-size: 13px; padding: 4px 6px; }
#songList .lw-count { font-style: normal; font-size: 11px; color: var(--a-dim); white-space: nowrap; }
#songList .lw-empty { margin: 0; padding: 8px 4px; font-size: 13px; color: var(--a-dim); }

/* ---- the "+" menu: each playlist a toggle (the square is filled when the song is in it), then "new playlist..." */
#songList .lw-menu {
  position: absolute;
  z-index: 5;
  width: 240px;
  max-height: min(280px, 80%);
  overflow-y: auto;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: #0b0a1c;
  border: 1px solid var(--a-neon);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}
#songList .lw-mhead { margin: 0 2px 4px; font-size: 11px; color: var(--a-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#songList .lw-mi {
  width: 100%;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas: none;
  align-items: center;
  column-gap: 8px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--a-text);
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 5px 6px;
  cursor: pointer;
}
#songList .lw-mi::before { content: ''; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid var(--a-dim); }
#songList .lw-mi.on::before { background: var(--a-neon); border-color: var(--a-neon); }
#songList .lw-mi b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#songList .lw-mi i { font-style: normal; font-size: 11px; color: var(--a-dim); }
#songList .lw-mi:hover:not(:disabled) { border-color: var(--a-line); background: rgba(255, 255, 255, 0.04); }
#songList .lw-mi:disabled { opacity: 0.5; cursor: default; }
#songList .lw-mi-new { grid-template-columns: minmax(0, 1fr); margin-top: 2px; color: var(--a-neon); border-top-color: var(--a-line); }
#songList .lw-mi-new::before { display: none; }
#songList .lw-mnew { display: flex; gap: 6px; margin-top: 4px; }

/* ---- a phone: the playlists become a row of chips at the top of the sheet (renaming and playing are in the open playlist) */
@media (max-width: 759px) {
  #songList.lw-member .lw-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #songList.lw-member .lw-side { order: -1; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; border-left: 0; border-bottom: 1px solid var(--a-line); scrollbar-width: none; }
  #songList.lw-member .lw-side-title,
  #songList.lw-member .lw-card-edit,
  #songList.lw-member .lw-card-play { display: none; }
  #songList.lw-member .lw-card { flex: none; display: flex; }
  #songList.lw-member .lw-card-open { display: flex; align-items: baseline; gap: 6px; max-width: 190px; padding: 6px 10px; }
  #songList.lw-member .lw-card.lw-editing .lw-name { flex: none; width: 150px; }
}

/* ---- dragging: the ghost of the song follows the pointer (it lives in <body>, outside the sheet) */
.lw-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
  display: grid;
  gap: 1px;
  max-width: 260px;
  padding: 6px 10px;
  font-family: 'Tiny5', 'Pixelify Sans', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.3;
  color: #ece8ff;
  background: rgba(9, 8, 22, 0.95);
  border: 1px solid #2de2e6;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}
.lw-ghost b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-ghost i { font-style: normal; font-size: 11px; color: #a29bcf; }
body.lw-dragging { user-select: none; -webkit-user-select: none; }
body.lw-dragging,
body.lw-dragging * { cursor: grabbing !important; }
@media (prefers-reduced-motion: reduce) {
  #songList .lw-card { transition: none; }
}