/* LMS Beta Tester Portal — dark theme, Smartshow purple/pink gradient to match
   the marketing site at lmc.leejamesapps.co.uk. */

/* Attachments block — rendered below thread / comment markdown. Image and
   video thumbs sit in a flex grid; bottom row is the filename + size link.
   Lee 2026-05-27. */
.att-list {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 14px 0 4px;
}
.att {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 280px;
  padding: 6px;
  border: 1px solid #2a2a36;
  border-radius: 6px;
  background: #14141c;
}
.att img, .att video {
  display: block; max-width: 100%; max-height: 200px;
  border-radius: 4px;
  background: #000;
}
.att-link {
  font-size: .78rem;
  color: #b896d3; text-decoration: none;
  word-break: break-all;
}
.att-link:hover { color: #fff; text-decoration: underline; }
.att-size { color: #8b919c; }

:root {
  --bg-0: #0c0c12;
  --bg-1: #15171e;
  --bg-card: #1a1c22;
  --border: #2c2c38;
  --border-strong: #4a4d56;
  --txt: #e6e9ef;
  --txt-dim: #8b919c;
  --brand: #9b7bbf;
  --brand-2: #c993b3;
  --chase: #d97aad;
  --good: #4cd49f;
  --bad: #d44c4c;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }
body {
  min-height: 100vh;
  background: var(--bg-0);
  color: var(--txt);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-2); text-decoration: none; }
a:hover { color: #ec6cb3; }

h1, h2, h3 { letter-spacing: .01em; }

/* Top bar ─────────────────────────────────────────────────────────── */
.site-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: linear-gradient(180deg, #1a1a26, #14141d);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--txt); text-decoration: none; }
.brand-logo {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(155,123,191,0.35));
}
.brand-name { font-weight: 700; letter-spacing: .04em; }
.brand-sub  { color: var(--txt-dim); font-size: .82rem; }

.site-nav { display: flex; align-items: center; gap: 14px; font-size: .9rem; }
.site-nav a { color: var(--txt-dim); padding: 6px 10px; border-radius: 4px; }
.site-nav a:hover { background: rgba(155,123,191,0.1); color: var(--txt); }
.site-nav a.active { color: var(--brand-2); background: rgba(155,123,191,0.15); }
.site-nav a.primary {
  background: linear-gradient(135deg, var(--brand), var(--chase));
  color: #fff; font-weight: 600;
}
.site-nav a.primary:hover { filter: brightness(1.1); color: #fff; }
.site-nav a.ghost {
  border: 1px solid var(--border-strong);
}
.site-nav .me { color: var(--brand-2); font-weight: 600; padding: 0 6px; }

/* Page ────────────────────────────────────────────────────────────── */
.page {
  flex: 1; width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 28px;
}
.page h1 { font-size: 1.5rem; margin-bottom: 6px; }
.page > p.lede { color: var(--txt-dim); margin-bottom: 24px; }

/* Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 26px;
  margin-bottom: 18px;
}
.card h2 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--brand-2); margin-bottom: 12px; font-weight: 600;
}

/* Forms ───────────────────────────────────────────────────────────── */
label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: .82rem; color: var(--txt-dim); }
label > input, label > textarea, label > select {
  font: inherit; padding: 9px 11px;
  background: var(--bg-1);
  color: var(--txt);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 100%;
}
label > input:focus, label > textarea:focus, label > select:focus {
  outline: 2px solid var(--brand); border-color: transparent;
}
textarea { min-height: 140px; font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: .88rem; }

button, .btn {
  font: inherit; cursor: pointer;
  padding: 9px 16px; border-radius: 4px; border: 1px solid var(--border-strong);
  background: var(--bg-1); color: var(--txt);
  text-decoration: none;
}
button:hover, .btn:hover { filter: brightness(1.2); }
button.primary, .btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--chase));
  border-color: transparent;
  color: #fff; font-weight: 600;
}
button.danger, .btn.danger { background: #6a1a1a; border-color: #a3404a; color: #fbd7da; }
button.ghost  { background: transparent; }
.btn.big      { padding: 14px 22px; font-size: 1rem; }

/* Flash ───────────────────────────────────────────────────────────── */
.flash-stack { width: 100%; max-width: 1100px; margin: 12px auto 0; padding: 0 28px; }
.flash {
  padding: 10px 14px; border-radius: 4px;
  margin-bottom: 8px; font-size: .88rem;
}
.flash-ok   { background: rgba(76,212,159,0.12); color: var(--good); border: 1px solid rgba(76,212,159,0.3); }
.flash-err  { background: rgba(212,76,76,0.12);  color: var(--bad);  border: 1px solid rgba(212,76,76,0.3); }
.flash-info { background: rgba(155,123,191,0.1); color: var(--brand-2); border: 1px solid rgba(155,123,191,0.25); }

/* Login + simple centred forms ────────────────────────────────────── */
.centred-form { max-width: 440px; margin: 60px auto; }
/* Logo above the sign-in / forgot / reset cards (Lee 2026-06-12). */
.login-logo { display: block; text-align: center; margin: 0 auto 22px; }
.login-logo img { max-width: 280px; width: 72%; height: auto; }

/* Thread list ─────────────────────────────────────────────────────── */
.thread-list { list-style: none; }
.thread {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--brand);
  border-radius: 5px;
  padding: 14px 18px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
}
.thread:hover { border-color: var(--brand-2); }
.thread.cat-bug        { border-left-color: #d44c4c; }
.thread.cat-feature    { border-left-color: #4cd49f; }
.thread.cat-ux         { border-left-color: #ffd99a; }
.thread.cat-discussion { border-left-color: #6cb8ff; }

.thread .title { font-weight: 600; color: var(--txt); }
.thread .title a { color: var(--txt); }
.thread .meta { color: var(--txt-dim); font-size: .78rem; grid-column: 1; }
.thread .badges { display: flex; gap: 6px; align-items: center; grid-row: 1 / 3; grid-column: 2; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  background: rgba(155,123,191,0.15); color: var(--brand-2);
  border: 1px solid rgba(155,123,191,0.3);
}
.badge.cat-bug        { background: rgba(212,76,76,0.18);   color: #ff9a9a; border-color: rgba(212,76,76,0.3); }
.badge.cat-feature    { background: rgba(76,212,159,0.18);  color: var(--good); border-color: rgba(76,212,159,0.3); }
.badge.cat-ux         { background: rgba(255,217,154,0.15); color: #ffd99a; border-color: rgba(255,217,154,0.3); }
.badge.cat-discussion { background: rgba(108,184,255,0.15); color: #9bd0ff; border-color: rgba(108,184,255,0.3); }
.badge.status-open    { background: transparent; }
.badge.status-fixed   { background: rgba(76,212,159,0.2); color: var(--good); }
.badge.status-closed  { background: rgba(139,145,156,0.2); color: var(--txt-dim); }
.badge.status-wontfix { background: rgba(212,76,76,0.18); color: #ff9a9a; }

/* Filter bar ──────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.filter-bar a {
  padding: 6px 12px; border-radius: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: .82rem; color: var(--txt-dim);
}
.filter-bar a:hover { border-color: var(--brand); color: var(--txt); }
.filter-bar a.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.filter-bar .spacer { flex: 1; }

/* Thread view ─────────────────────────────────────────────────────── */
.thread-head { margin-bottom: 14px; }
.thread-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.thread-meta { color: var(--txt-dim); font-size: .82rem; margin-top: 4px; }
.thread-body, .comment-body {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px;
  padding: 16px 22px; margin-bottom: 12px;
}
.thread-body p, .comment-body p { margin-bottom: 10px; }
.thread-body code, .comment-body code {
  background: var(--bg-0); padding: 2px 6px; border-radius: 3px;
  font-size: .85em; font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
}
.thread-body pre, .comment-body pre {
  background: var(--bg-0); padding: 12px 14px; border-radius: 4px;
  overflow-x: auto; margin: 8px 0;
}
.thread-body pre code { background: transparent; padding: 0; }
.comment-head { font-size: .78rem; color: var(--txt-dim); margin-bottom: 6px; }
.comment-author { color: var(--brand-2); font-weight: 600; }

/* Download page ───────────────────────────────────────────────────── */
.download-hero {
  text-align: center; padding: 28px 16px;
  background: linear-gradient(135deg, rgba(155,123,191,0.08), rgba(201,147,179,0.08));
  border: 1px solid rgba(155,123,191,0.25);
  border-radius: 8px;
  margin-bottom: 18px;
}
.download-hero .version {
  font-size: 1.8rem; font-weight: 700;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.download-hero .released { color: var(--txt-dim); font-size: .82rem; margin-bottom: 18px; }
.download-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.release-notes {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px;
  padding: 14px 18px; text-align: left;
  font-size: .9rem; color: var(--txt-dim); line-height: 1.6;
}

/* Footer ──────────────────────────────────────────────────────────── */
.site-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 18px 28px;
  font-size: .78rem; color: var(--txt-dim);
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .site-bar { flex-direction: column; gap: 8px; padding: 12px; }
  .page { padding: 16px; }
  .thread { grid-template-columns: 1fr; }
  .thread .badges { grid-row: auto; grid-column: 1; }
}

/* Release history accordion (Lee 2026-05-31) — beta-tester download
   page now lists every release newest-first with collapsible bodies.
   Latest item stays open on page load. */
.release-history { margin-top: 16px; }
.release-history-item {
  border: 1px solid #2c3140;
  border-radius: 6px;
  margin-bottom: 6px;
  background: #14171f;
}
.release-history-item summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  user-select: none;
}
.release-history-item summary::-webkit-details-marker { display: none; }
.release-history-item summary::before {
  content: '▸';
  color: var(--brand-2, #b896d3);
  font-size: .78rem;
  transition: transform 120ms;
}
.release-history-item[open] summary::before { transform: rotate(90deg); display: inline-block; }
.release-history-item:hover { border-color: #4d4458; }
.rh-version {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  color: #f2efe8;
  font-size: .92rem;
}
.rh-date {
  color: #8a96b0;
  font-size: .78rem;
  margin-left: auto;
}
.rh-notes {
  padding: 0 14px 12px;
  color: #c4c9d2;
  font-size: .86rem;
  line-height: 1.55;
  border-top: 1px solid #2c3140;
  margin-top: 4px;
  padding-top: 10px;
}



/* ─── Profile page (Lee 2026-05-31, restyled) ───────────────────────────
   Tester profile + password change. Two-column grid inside each section,
   chip-row for the output-protocols multi-select, consistent label
   typography, breathing-room spacing. */

.profile-page {
  max-width: 760px;
  margin: 0 auto;
}
.profile-header { margin-bottom: 20px; }
.profile-header h1 { margin: 0 0 6px; }
.profile-header .lede { color: #8a96b0; font-size: .92rem; margin: 0; }

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}

.profile-section {
  border: 1px solid #2c3140;
  border-radius: 8px;
  background: #14171f;
  padding: 18px 22px 22px;
}
.profile-section legend {
  padding: 0 8px;
  margin-left: -4px;
  color: #b896d3;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 8px;
}
.profile-grid .span-2 { grid-column: 1 / -1; }

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field-label {
  font-size: .78rem;
  font-weight: 600;
  color: #c4c9d2;
  letter-spacing: .02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.field-tag {
  font-size: .68rem;
  font-weight: 400;
  color: #6b727e;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-style: italic;
}
.field .hint {
  color: #6b727e;
  font-size: .72rem;
  font-style: italic;
}

.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="url"],
.profile-form input[type="number"],
.profile-form input[type="password"],
.profile-form select,
.profile-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: #1a1f2a;
  border: 1px solid #2c3140;
  color: #f2efe8;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: .92rem;
  font-family: inherit;
  transition: border-color 80ms, background 80ms;
}
.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus {
  outline: none;
  border-color: #6b54aa;
  background: #1f1f2c;
}
.profile-form input:disabled {
  opacity: .55;
  background: #11141b;
  cursor: not-allowed;
  color: #8a96b0;
}
.profile-form textarea { resize: vertical; min-height: 70px; }

/* Tick row — full-width single-line check labels */
.profile-grid label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: #c4c9d2;
  padding: 8px 10px;
  background: #1a1f2a;
  border: 1px solid #2c3140;
  border-radius: 5px;
  cursor: pointer;
}
.profile-grid label.check:hover { border-color: #4d4458; }
.profile-grid label.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #9b7bbf;
  cursor: pointer;
  margin: 0;
}

/* Output-protocol chip row */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: #1a1f2a;
  border: 1px solid #2c3140;
  border-radius: 999px;
  font-size: .85rem;
  color: #c4c9d2;
  cursor: pointer;
  transition: background 80ms, border-color 80ms, color 80ms;
  user-select: none;
}
.chip input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #9b7bbf;
  cursor: pointer;
}
.chip:hover { border-color: #6b54aa; color: #f2efe8; }
.chip:has(input:checked) {
  background: rgba(155, 123, 191, 0.18);
  border-color: #9b7bbf;
  color: #f2efe8;
}

/* Action row at the bottom of each form */
.profile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.profile-meta {
  margin-right: auto;
  color: #6b727e;
  font-size: .76rem;
  font-style: italic;
}
.profile-form .btn {
  padding: 9px 22px;
  font-size: .92rem;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  background: #232733;
  border: 1px solid #2c3140;
  color: #c4c9d2;
  transition: background 80ms, border-color 80ms;
}
.profile-form .btn:hover { background: rgba(155,123,191,0.22); border-color: #6b54aa; color: #fbecf4; }
.profile-form .btn.primary {
  background: #9b7bbf;
  border-color: #9b7bbf;
  color: #14171f;
}
.profile-form .btn.primary:hover { background: #b896d3; border-color: #b896d3; color: #0a0d14; }

/* Password section uses a tinted border so it's visually distinct. */
.profile-pw .profile-section {
  background: #1a1422;
  border-color: #3a2c4a;
}
.profile-pw .profile-section legend { color: #ff8d96; }

/* Flash banners (success / error). */
.flash {
  padding: 10px 14px;
  border-radius: 5px;
  margin-bottom: 16px;
  font-size: .9rem;
}
.flash-ok  { background: #163524; color: #6ee0a0; border: 1px solid #2e7a4f; }
.flash-err { background: #3a1820; color: #ff8d96; border: 1px solid #8c3b46; }

/* Username in nav now clickable -> /profile. */
.site-nav a.me {
  color: #b896d3;
  font-weight: 600;
  text-decoration: none;
}
.site-nav a.me:hover { text-decoration: underline; }
.site-nav a.me.active { color: #f2efe8; }

/* Narrow viewport — collapse to single column */
@media (max-width: 640px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-grid .span-2 { grid-column: 1; }
}


/* Public profile view (Lee 2026-05-31). Read-only render of another
   tester's profile, served by /u?id=<n>. */
.uview .profile-header h1 { margin-bottom: 4px; }
.uview .profile-header .lede { font-size: .85rem; }
.uview-bio {
  font-style: italic;
  color: #c4c9d2;
  padding: 12px 18px;
  margin: 0 0 16px;
  border-left: 3px solid #9b7bbf;
  background: #18141f;
  border-radius: 0 6px 6px 0;
  font-size: .95rem;
}
.uview-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.uview-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: .88rem;
  padding: 4px 0;
  border-bottom: 1px dashed #2c3140;
}
.uview-row:last-child { border-bottom: none; }
.uview-label {
  color: #8a96b0;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.uview-value {
  color: #f2efe8;
  word-break: break-word;
}
.uview-value a { color: #b896d3; }
.uview-admin {
  background: #1f1822;
  border-color: #4a2c3a;
}
.uview-admin legend { color: #ff8d96; }

@media (max-width: 640px) {
  .uview-row { grid-template-columns: 1fr; }
  .uview-label { font-size: .68rem; }
}

/* Author-name links on feedback posts → public profile. */
.author-link {
  color: #b896d3;
  font-weight: 600;
  text-decoration: none;
}
.author-link:hover { text-decoration: underline; }


/* Testers directory (Lee 2026-05-31). Card grid. */
.testers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.tester-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 14px;
  background: #14171f;
  border: 1px solid #2c3140;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background 90ms, border-color 90ms, transform 90ms;
}
.tester-card:hover {
  background: #1a1f2a;
  border-color: #6b54aa;
  transform: translateY(-1px);
}
.tester-card.is-private { opacity: .7; border-style: dashed; }
.tester-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tester-name {
  font-weight: 700;
  font-size: 1rem;
  color: #f2efe8;
}
.tester-tag {
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}
.tester-tag.you {
  background: rgba(110, 224, 160, 0.15);
  color: #6ee0a0;
  border: 1px solid #2e7a4f;
}
.tester-tag.private {
  background: rgba(255, 141, 150, 0.10);
  color: #ff8d96;
  border: 1px solid #8c3b46;
}
.tester-bio {
  font-style: italic;
  color: #c4c9d2;
  font-size: .82rem;
  line-height: 1.4;
}
.tester-meta {
  color: #8a96b0;
  font-size: .78rem;
}
.tester-empty { color: #6b727e; font-style: italic; }


/* Profile avatars (Lee 2026-05-31). Used on /profile (preview + upload),
   /u (public view), /testers (directory cards), and the nav username. */

.avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #2c3140;
}
.avatar-preview {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #1a1f2a;
  border: 2px solid #2c3140;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-empty {
  color: #6b727e;
  font-size: .7rem;
  font-style: italic;
  text-align: center;
}
.avatar-controls {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Public view header — avatar next to name. */
.uview-header {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}
.uview-header-text { flex: 1 1 auto; }
.uview-header-text h1 { margin: 0 0 4px; }
.uview-avatar {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid #2c3140;
  background: #1a1f2a;
  object-fit: cover;
  display: block;
}
.uview-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b896d3;
  font-size: 2rem;
  font-weight: 700;
}

/* Tester directory cards — small avatar in the card head. */
.tester-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tester-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a1f2a;
  border: 1px solid #2c3140;
  object-fit: cover;
  display: block;
}
.tester-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b896d3;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Nav-strip mini avatar (next to username on the top bar). */
.site-nav a.me {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1a1f2a;
  border: 1px solid #2c3140;
  object-fit: cover;
  display: inline-block;
}

/* Status section headers on the All-statuses feedback view (Lee 2026-06-06).
   Each section gets a coloured h2 keyed off the status, matching the badge
   palette so the page reads at a glance. Spacing is generous — first
   section gets a thin top margin, subsequent sections more so they read
   as distinct buckets, not crowded run-ons. */
.status-section {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(155, 123, 191, 0.18);
  letter-spacing: 0.01em;
}
.status-section:first-of-type { margin-top: 8px; }
.status-section .status-section-count {
  color: var(--txt-dim);
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 4px;
}
.status-section.status-open    { color: var(--brand-2); }
.status-section.status-fixed   { color: var(--good); }
.status-section.status-closed  { color: var(--txt-dim); }
.status-section.status-wontfix { color: #ff9a9a; }

/* Discussion section header on the All-categories All-statuses view —
   discussions are peeled out of the status buckets and rendered in their
   own band at the bottom, using the cat-discussion blue (same palette as
   the badge) so the visual cue matches. (Lee 2026-06-06.) */
.status-section.discussion-section { color: #9bd0ff; }

/* Feedback search bar (Lee 2026-06-06) — sits under the filter bar, full
   row so the input has room to breathe even on mobile. Matches the existing
   filter-bar gap + alignment. */
.search-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 10px 0 16px;
}
.search-input {
  flex: 1; min-width: 200px;
  background: #1a1622;
  color: var(--txt);
  border: 1px solid #3a2f4a;
  border-radius: 5px;
  padding: 7px 10px;
  font-size: .92rem;
  font-family: inherit;
}
.search-input:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 2px rgba(155,123,191,0.18);
}
.search-input::placeholder { color: var(--txt-dim); }
.search-clear {
  font-size: .82rem;
  color: var(--txt-dim);
}
.search-clear:hover { color: var(--brand-2); }
.search-status {
  background: rgba(155,123,191,0.07);
  border: 1px solid rgba(155,123,191,0.2);
  border-radius: 5px;
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: .88rem;
  color: var(--txt);
}
.search-status em { color: var(--brand-2); font-style: normal; }

/* Post-count stats on profile + directory (Lee 2026-06-06). Subtle, lives
   on its own row so it doesnt crowd the bio/meta lines. win-unpacked/

/* Post-count stats on profile + directory (Lee 2026-06-06). Subtle, lives
   on its own row so it doesn't crowd the bio/meta lines. */
.uview-stats {
  color: var(--txt-dim);
  font-size: .88rem;
  margin: 4px 0 0;
}
.uview-stats strong { color: var(--brand-2); font-weight: 600; }
.tester-stats {
  color: var(--txt-dim);
  font-size: .8rem;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(155,123,191,0.15);
}
.tester-stats strong { color: var(--brand-2); font-weight: 600; }

/* Author filter — banner above the search-status one, with the Clear link
   pushed to the right (Lee 2026-06-06). */
.search-status.author-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Tester directory: the card is now wrapped in a div so the stats row can be
   its own link sibling (nested <a>s would invalidate the markup). The wrap
   needs to be the grid item the old <a> was, and the inner card+stats stack
   together as one visual unit with a hover effect that lifts both. */
.tester-card-wrap {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  transition: transform .15s ease;
}
.tester-card-wrap:hover { transform: translateY(-1px); }
.tester-card-wrap > .tester-card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
}
.tester-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(155, 123, 191, 0.06);
  border: 1px solid rgba(155, 123, 191, 0.18);
  border-top: 1px dashed rgba(155, 123, 191, 0.25);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 7px 12px;
  font-size: .82rem;
  color: var(--txt-dim);
  text-decoration: none;
}
.tester-stats:hover {
  background: rgba(155, 123, 191, 0.14);
  color: var(--txt);
}
.tester-stats strong { color: var(--brand-2); font-weight: 600; }
.tester-stats-arrow {
  margin-left: auto;
  color: var(--brand-2);
  font-weight: 600;
  opacity: 0.6;
  transition: opacity .15s, transform .15s;
}
.tester-stats:hover .tester-stats-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Profile post-count link — inherits the .uview-stats styling but gets a
   subtle hover that hints at its clickability. */
.uview-stats-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(155, 123, 191, 0.4);
  padding-bottom: 1px;
}
.uview-stats-link:hover {
  color: var(--brand-2);
  border-bottom-color: var(--brand-2);
}

/* ── Per-post edit (author or admin) ── */
.edited-tag { color: var(--txt-dim); font-style: italic; font-size: .78rem; }
.edit-row { margin: -6px 0 12px; }
.link-btn {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--brand-2); font-size: .72rem; font-weight: 500;
  letter-spacing: .02em; text-transform: lowercase; opacity: .75;
}
.link-btn:hover { opacity: 1; text-decoration: underline; }
.edit-form {
  background: rgba(155,123,191,0.05);
  border: 1px solid rgba(155,123,191,0.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.edit-form label { display: block; font-size: .78rem; color: var(--txt-dim); margin-bottom: 8px; }
.edit-form input[type="text"],
.edit-form textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--txt); border-radius: 6px;
  padding: 8px 10px; font-family: inherit; font-size: .92rem;
  margin-top: 4px;
}
.edit-form textarea { min-height: 140px; resize: vertical; line-height: 1.45; }
.edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Edit/Delete row inline layout + delete-specific styling */
.edit-row { display: flex; gap: 14px; align-items: center; }
.del-form { display: contents; }
.link-btn-del { color: #d97a7a; }
.link-btn-del:hover { color: #f08a8a; }

/* Download page main logo */
.download-hero-logo { text-align: center; margin: 8px 0 18px; }
.download-hero-logo img { max-width: 100%; width: 560px; height: auto; display: inline-block; }

/* ── Private messaging (DMs) ───────────────────────────────────────── */

/* Message button on profile pages. */
.btn-msg {
  display: inline-block; margin-left: 12px;
  background: rgba(155,123,191,0.12); color: var(--brand-2);
  border: 1px solid rgba(155,123,191,0.42);
  padding: 5px 12px; border-radius: 6px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  vertical-align: middle; transition: background .12s, color .12s;
}
.btn-msg:hover { background: rgba(155,123,191,0.28); color: #fff; }

/* Nav unread badge. */
.nav-badge {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
  background: #ec6cb3; color: #fff;
  border-radius: 999px; font-size: .68rem; font-weight: 700;
  line-height: 18px; text-align: center; vertical-align: 1px;
  margin-left: 4px;
}

/* Inbox list. */
.dm-list { display: flex; flex-direction: column; gap: 8px; }
.dm-row {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 14px;
  padding: 12px 16px;
  background: #14141c; border: 1px solid #25252f; border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: border-color .12s, background .12s;
}
.dm-row:hover { border-color: rgba(155,123,191,0.42); background: #181820; }
.dm-row.has-unread { border-left: 3px solid #ec6cb3; padding-left: 13px; }
.dm-row-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.dm-row-avatar-fallback {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #9b7bbf, #c993b3);
  color: #fff; font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.dm-row-mid { min-width: 0; }
.dm-row-name { font-weight: 700; color: var(--txt); margin-bottom: 3px; }
.dm-row-preview {
  font-size: .82rem; color: var(--txt-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-row-right { text-align: right; }
.dm-row-when { font-size: .72rem; color: var(--txt-dim); }
.dm-row-unread {
  display: inline-block; margin-top: 4px;
  background: #ec6cb3; color: #fff;
  padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 700;
}

/* DM thread bubbles. */
.dm-msg {
  max-width: 78%;
  padding: 10px 14px; margin: 6px 0;
  border-radius: 10px;
  background: #1a1a24; border: 1px solid #25252f;
}
.dm-mine   { margin-left: auto;  background: rgba(155,123,191,0.12); border-color: rgba(155,123,191,0.35); }
.dm-theirs { margin-right: auto; }
.dm-meta   { font-size: .7rem; color: var(--txt-dim); margin-bottom: 6px; }
.dm-body p:last-child { margin-bottom: 0; }
.dm-read   { color: #4cd49f; }
.dm-unread { color: #ffb84d; }

/* Role badges on profile pages (Lee 2026-06-10). Visually distinct from the
   thread category badges so a role isn't mistaken for a thread tag. */
.role-badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; vertical-align: middle; margin-left: 6px;
  border: 1px solid transparent;
}
.role-badge.role-admin {
  background: rgba(155,123,191,0.22); color: #d8b4f0;
  border-color: rgba(155,123,191,0.45);
}
.role-badge.role-mod {
  background: rgba(108,184,255,0.22); color: #9bd0ff;
  border-color: rgba(108,184,255,0.45);
}
.uview-admin form.uview-role-form { margin-top: 12px; }

/* Forum blockquote, produced by the Quote button (Lee 2026-06-12). The Quote
   button itself reuses .link-btn so it sits inline with edit/delete. */
.thread-body blockquote,
.comment-body blockquote,
.dm-body blockquote {
  margin: 8px 0; padding: 6px 14px;
  border-left: 3px solid rgba(155,123,191,0.6);
  background: rgba(155,123,191,0.08);
  border-radius: 0 6px 6px 0;
  color: #c3b1e0;                /* slightly different lilac tint (Lee 2026-06-12) */
  font-style: italic;            /* whole quote — incl. the "<name> said:" — in italics */
}
.thread-body blockquote strong,
.comment-body blockquote strong,
.dm-body blockquote strong { color: #d8c6f2; }

/* Members page: wider so the cards lay out 4-across (Lee 2026-06-12). */
.profile-page:has(.testers-grid) { max-width: 1100px; }

.role-badge.role-member { background: rgba(139,145,156,0.16); color: #b9c0cc; border-color: rgba(139,145,156,0.35); }
.tester-card-head .role-badge { margin-left: 0; }