/* ==========================================================================
   ACCOUNT — a reader's own shelf
   Loaded only by /account. Everything here is namespaced `acct-` and leans on
   the design tokens in css/styles.css rather than redefining any of them.
   ========================================================================== */

/* --- Page frame ---------------------------------------------------------- */

.acct-wrap [hidden], .acct-tabs[hidden], .acct-head [hidden] { display: none !important; }

.acct-head {
  padding: 7rem 3rem 0;
  max-width: 1300px;
  margin: 0 auto;
}

.acct-head .ed-dek {
  max-width: 54ch;
  margin-top: 0.9rem;
  font-size: 0.95rem;
}

.acct-wrap {
  padding-top: 2.5rem;
  padding-bottom: 6rem;
  display: grid;
  gap: 2.5rem;
}

/* Headings: Syne with a single Instrument Serif accent word. */
.acct-h {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

.acct-head .acct-h {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-top: 0.7rem;
}

.acct-section > .acct-h,
.acct-msg .acct-h,
.acct-identity .acct-h {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.acct-h em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.14em;
  letter-spacing: 0;
  color: var(--accent);
}

.acct-sub {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.acct-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-mid);
  margin-top: 0.6rem;
  max-width: 62ch;
}

.acct-section { display: grid; gap: 0.2rem; }
.acct-section > .acct-stats,
.acct-section > .acct-posts,
.acct-section > .acct-follows { margin-top: 1.3rem; }

.acct-loading {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.86rem;
  color: var(--text-dim);
  padding: 2rem 0;
}

/* --- The house card ------------------------------------------------------ */

.acct-card {
  background: var(--bg-raised);
  border: 1px solid var(--rule, rgba(109,40,217,0.08));
  border-radius: 16px;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 1px 3px rgba(109,40,217,0.04);
}

.acct-msg { max-width: 640px; }
.acct-msg p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-mid);
  margin-top: 0.8rem;
}
.acct-msg .ed-kicker { color: var(--accent); }
/* Inline links only — a .btn-primary in here keeps its white-on-purple. */
.acct-msg p a { color: var(--accent); }

.acct-btn {
  display: inline-block;
  margin-top: 1.2rem;
}

/* --- Identity ------------------------------------------------------------ */

.acct-identity .ed-kicker { color: var(--accent); }

.acct-username {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  letter-spacing: -0.03em;
  color: var(--text);
  margin-top: 0.5rem;
  word-break: break-word;
}

.acct-name-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
  align-items: center;
}

.acct-name-form input {
  flex: 0 1 320px;
  min-width: 0;
  padding: 0.75rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule-strong, rgba(109,40,217,0.15));
  border-radius: 100px;
  outline: none;
  transition: border-color 0.2s;
}
.acct-name-form input:focus { border-color: var(--accent); }
.acct-name-form .acct-btn { margin-top: 0; }

.acct-name-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.7rem;
}
.acct-name-msg.is-bad { color: #b91c1c; }

/* --- Stats --------------------------------------------------------------- */

.acct-stats {
  display: grid;
  /* 150px min lets all seven tiles sit on one row at the 1300px wrap, rather
     than leaving a single orphan on a second line. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.acct-stat {
  background: var(--bg-raised);
  border: 1px solid var(--rule, rgba(109,40,217,0.08));
  border-radius: 12px;
  padding: 1.2rem 1.1rem;
  display: grid;
  gap: 0.15rem;
  align-content: start;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.acct-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(109,40,217,0.1);
  border-color: var(--rule-strong, rgba(109,40,217,0.15));
}

.acct-stat-n {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}

.acct-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  margin-top: 0.45rem;
}

.acct-stat-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.45;
}

/* --- Posts --------------------------------------------------------------- */

.acct-posts { display: grid; gap: 1rem; }

.acct-post {
  background: var(--bg-raised);
  border: 1px solid var(--rule, rgba(109,40,217,0.08));
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.acct-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(109,40,217,0.1);
  border-color: var(--rule-strong, rgba(109,40,217,0.15));
}

.acct-post.is-pending {
  border-color: var(--rule-strong, rgba(109,40,217,0.15));
  border-left: 3px solid var(--glow-amber, #d97706);
}

.acct-post-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule, rgba(109,40,217,0.08));
}

.acct-post-room {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  overflow-wrap: anywhere;
}
.acct-post-room:hover { color: var(--accent); border-bottom-color: var(--accent); }

.acct-post-when {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.acct-badge {
  margin-left: auto;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  white-space: nowrap;
}
.acct-badge.is-live {
  color: var(--glow-green, #059669);
  background: rgba(5,150,105,0.08);
  border: 1px solid rgba(5,150,105,0.2);
}
.acct-badge.is-pending {
  color: var(--glow-amber, #d97706);
  background: rgba(217,119,6,0.09);
  border: 1px solid rgba(217,119,6,0.25);
}

.acct-pending-line {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  color: var(--glow-amber, #d97706);
  margin-top: 0.75rem;
}

.acct-post-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-mid);
  margin-top: 0.75rem;
  overflow-wrap: anywhere;
}

.acct-post-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 0.5rem;
}

.acct-row-error {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: #b91c1c;
  margin-top: 0.7rem;
}

/* --- Row actions --------------------------------------------------------- */

.acct-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
  align-items: center;
}
.acct-row-actions .acct-btn { margin-top: 0; }

.acct-btn-quiet,
.acct-btn-danger {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.5rem 1.15rem;
  border-radius: 100px;
  cursor: pointer;
  background: transparent;
  transition: all 0.25s;
}

.acct-btn-quiet {
  border: 1px solid var(--rule-strong, rgba(109,40,217,0.15));
  color: var(--text-mid);
}
.acct-btn-quiet:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}

.acct-btn-danger {
  border: 1px solid rgba(185,28,28,0.3);
  color: #b91c1c;
}
.acct-btn-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.acct-btn-danger[disabled],
.acct-btn-quiet[disabled] { opacity: 0.55; cursor: default; }

.acct-confirm {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--rule-strong, rgba(109,40,217,0.15));
  border-radius: 12px;
}
.acct-confirm > span {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--text-mid);
}

/* --- The editor ---------------------------------------------------------- */

.acct-edit { margin-top: 0.9rem; }

.acct-edit textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule-strong, rgba(109,40,217,0.15));
  border-radius: 12px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.acct-edit textarea:focus { border-color: var(--accent); }
/* --- Empty states -------------------------------------------------------- */

.acct-empty { text-align: left; }
.acct-empty p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-mid);
  margin-top: 0.6rem;
  max-width: 56ch;
}

/* --- Followers and following --------------------------------------------- */

.acct-follows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.acct-follow-card {
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.acct-follow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(109,40,217,0.1);
  border-color: var(--rule-strong, rgba(109,40,217,0.15));
}

.acct-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(109,40,217,0.07);
  border-radius: 100px;
  padding: 0.15rem 0.6rem;
}

.acct-people {
  list-style: none;
  margin-top: 1rem;
  display: grid;
  gap: 0.1rem;
}

.acct-person {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule, rgba(109,40,217,0.08));
}
.acct-person:last-child { border-bottom: none; }

.acct-person-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

.acct-person-when {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.acct-people-empty {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-dim);
  border: 1px dashed var(--rule-strong, rgba(109,40,217,0.15));
  border-radius: 12px;
  padding: 1rem 1.05rem;
  margin-top: 0.4rem;
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 900px) {
  .acct-head { padding: 6.5rem 1.25rem 0; }
  .acct-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 480px) {
  .acct-card { padding: 1.25rem 1.1rem; }
  .acct-post { padding: 1.1rem 1rem; }
  .acct-stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .acct-badge { margin-left: 0; }
  .acct-name-form { flex-direction: column; align-items: stretch; }
  .acct-name-form .acct-btn { width: 100%; }
}

/* Motion is decoration; the hover lift is the first thing to go. */
@media (prefers-reduced-motion: reduce) {
  .acct-stat,
  .acct-post,
  .acct-follow-card { transition: none; }
  .acct-stat:hover,
  .acct-post:hover,
  .acct-follow-card:hover { transform: none; }
}

/* ── The inbox ───────────────────────────────────────────────────────────────
   Hidden entirely until something lands in it, so a reader who follows nobody
   never meets an empty box. */
.acct-inbox-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.acct-btn-quiet {
  background: none;
  border: 0;
  padding: 0;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--accent);
  cursor: pointer;
}
.acct-btn-quiet:hover { text-decoration: underline; }

.acct-inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.acct-inbox-item {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.acct-inbox-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(109,40,217,0.1);
}
/* Unread carries the accent down its edge rather than a dot to hunt for. */
.acct-inbox-item.is-unread { border-left: 3px solid var(--accent); }
.acct-inbox-item a {
  display: block;
  padding: 0.85rem 1.05rem;
  text-decoration: none;
  color: var(--text-mid);
  font-size: 0.85rem;
  line-height: 1.5;
}
.acct-inbox-who { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--text); }
.acct-inbox-when { color: var(--text-dim); font-size: 0.72rem; margin-left: 0.4rem; }
.acct-inbox-preview {
  display: block;
  margin-top: 0.35rem;
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* ── The shelf ───────────────────────────────────────────────────────────────
   A reading log the reader keeps for themselves. Same raised card, same purple
   hairlines and same pill controls as the rest of the page — the shelf is not a
   different product, it is another shelf in the same room. */

.shelf-form-card { margin-top: 1.3rem; }

.shelf-form { margin-top: 1rem; }

.shelf-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem 1.1rem;
}

/* The wide fields — title, author, notes — take the whole row so a long book
   title is not typed into a stub. */
.shelf-field-wide { grid-column: 1 / -1; }

.shelf-field { display: grid; gap: 0.35rem; align-content: start; }

.shelf-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.shelf-input {
  width: 100%;
  padding: 0.72rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule-strong, rgba(109,40,217,0.15));
  border-radius: 100px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.shelf-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109,40,217,0.09);
}
.shelf-input::placeholder { color: var(--text-dim); }

.shelf-select {
  appearance: none;
  cursor: pointer;
  /* A chevron drawn in the border colour, so no image request is made. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.85rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

/* The one field that is not a pill: a textarea with rounded corners reads as a
   place to write, where a 100px radius reads as a search box. */
.shelf-textarea {
  border-radius: 14px;
  resize: vertical;
  min-height: 6rem;
}

.shelf-hint {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--text-dim);
  padding-left: 0.15rem;
}

.shelf-form-actions { margin-top: 1.2rem; }
.shelf-form-actions .acct-btn { margin-top: 0; }

.shelf-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin-top: 0.8rem;
  max-width: 62ch;
}
.shelf-msg.is-ok { color: var(--glow-green, #059669); }
.shelf-msg.is-bad { color: #b91c1c; }

.shelf-count { margin-top: 1.6rem; }

/* --- The books ----------------------------------------------------------- */

.shelf-list { display: grid; gap: 1rem; margin-top: 0.9rem; }

.shelf-book {
  background: var(--bg-raised);
  border: 1px solid var(--rule, rgba(109,40,217,0.08));
  border-radius: 14px;
  padding: 1.2rem 1.35rem;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.shelf-book:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(109,40,217,0.1);
  border-color: var(--rule-strong, rgba(109,40,217,0.15));
}
/* The row currently loaded into the form above, so the two are visibly one. */
.shelf-book.is-editing {
  border-color: var(--rule-strong, rgba(109,40,217,0.15));
  border-left: 3px solid var(--accent);
}

.shelf-book-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--rule, rgba(109,40,217,0.08));
}

.shelf-book-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  overflow-wrap: anywhere;
}
a.shelf-book-title:hover { color: var(--accent); border-bottom-color: var(--accent); }

.shelf-book-author {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--text-mid);
  overflow-wrap: anywhere;
}

.shelf-rating {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.14rem;
  color: var(--accent);
  white-space: nowrap;
}
.shelf-rating.is-none {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.shelf-star-off { opacity: 0.24; }

.shelf-book-when {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.7rem;
}
.shelf-book-when.is-none { opacity: 0.7; }

.shelf-book-notes {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-mid);
  margin-top: 0.55rem;
  overflow-wrap: anywhere;
}

.shelf-book-editing {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  color: var(--accent);
  margin-top: 0.6rem;
}

/* --- Who can see it ------------------------------------------------------ */

.shelf-privacy {
  margin-top: 1.3rem;
  display: grid;
  gap: 0.2rem;
}

.shelf-priv-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule, rgba(109,40,217,0.08));
}
.shelf-priv-row:first-child { padding-top: 0.2rem; }
.shelf-priv-row:last-child { border-bottom: none; padding-bottom: 0.2rem; }

.shelf-priv-text { display: grid; gap: 0.2rem; }

.shelf-priv-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.shelf-priv-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 46ch;
}

/* Two halves of one pill, so the choice reads as a switch rather than as two
   unrelated buttons. */
.shelf-priv-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--rule-strong, rgba(109,40,217,0.15));
  border-radius: 100px;
  flex: 0 0 auto;
}

.shelf-priv-btn {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.42rem 1.05rem;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.shelf-priv-btn:hover:not(.is-on):not([disabled]) { color: var(--accent); }
.shelf-priv-btn.is-on {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #fff;
  box-shadow: 0 4px 14px rgba(109,40,217,0.22);
}
.shelf-priv-btn[disabled] { cursor: default; opacity: 0.6; }

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 600px) {
  .shelf-form-grid { grid-template-columns: 1fr; }
  .shelf-rating { margin-left: 0; }
  .shelf-priv-row { flex-direction: column; align-items: stretch; }
  .shelf-priv-toggle { align-self: flex-start; }
  .shelf-form-actions { flex-direction: column; align-items: stretch; }
  .shelf-form-actions .btn-primary { width: 100%; }
}

@media (max-width: 480px) {
  .shelf-book { padding: 1.1rem 1rem; }
}

/* Motion is decoration here too — the lift and the switch's slide both go. */
@media (prefers-reduced-motion: reduce) {
  .shelf-book,
  .shelf-input,
  .shelf-priv-btn { transition: none; }
  .shelf-book:hover { transform: none; }
}

/* ─── Your activity (private) ─────────────────────────────────────────────── */

.acct-activity-card + .acct-activity-card { margin-top: 0.9rem; }
.acct-sub-note { margin-top: 0.2rem; }

.acct-clubs,
.acct-replies,
.acct-reactions {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.acct-club {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
}
.acct-clubs li:last-child { border-bottom: none; padding-bottom: 0; }
.acct-club a {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  text-decoration: none;
}
.acct-club a:hover { color: var(--accent); text-decoration: underline; }
.acct-club-n {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  color: var(--text-dim);
}

.acct-reply {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: rgba(109,40,217,0.02);
}
.acct-reply-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.acct-reply-who {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}
.acct-reply-when {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.acct-reply-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.acct-reply-on {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--text-dim);
  margin: 0.4rem 0 0;
}
.acct-reply-go {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--accent);
  text-decoration: none;
}
.acct-reply-go:hover { text-decoration: underline; }

.acct-reaction {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.acct-reactions li:last-child { border-bottom: none; padding-bottom: 0; }
.acct-reaction-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
  text-decoration: none;
}
.acct-reaction-text:hover { color: var(--accent); text-decoration: underline; }
.acct-reaction-where {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.acct-reaction-tally {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--text-mid);
}
.acct-reaction-tally b {
  font-family: 'Syne', sans-serif;
  color: var(--accent);
}

/* ─── Messages ────────────────────────────────────────────────────────────────
   Two panes on a wide screen — the conversations on the left, the open one on
   the right — and one column stacked below that. Same raised card, same purple
   hairlines: a conversation is another shelf in the same room, not a chat app
   bolted onto the side of one. */

.acct-dm {
  display: grid;
  grid-template-columns: minmax(190px, 260px) 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.acct-dm-list {
  border-right: 1px solid var(--rule);
  padding: 1rem;
  max-height: 460px;
  overflow-y: auto;
}
.acct-dm-list .acct-empty p { margin-top: 0; font-size: 0.84rem; }

.acct-dm-convs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.acct-dm-conv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.acct-dm-conv:hover { background: var(--bg-soft, rgba(109,40,217,0.04)); }
.acct-dm-conv.is-open {
  border-color: var(--rule-strong, rgba(109,40,217,0.15));
  background: var(--bg-soft, rgba(109,40,217,0.05));
}
/* Unread carries the accent down its edge, matching the inbox above. */
.acct-dm-conv.is-unread { border-left: 3px solid var(--accent); }

.acct-dm-who {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text);
}
.acct-dm-when {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.acct-dm-last {
  grid-column: 1 / -1;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.acct-dm-thread {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  max-height: 460px;
  padding: 1rem 1.2rem 1.1rem;
}
.acct-dm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.acct-dm-profile {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
}
.acct-dm-profile:hover { text-decoration: underline; }

.acct-dm-empty,
.acct-dm-first {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: auto 0;
  list-style: none;
}
.acct-dm-empty { text-align: center; padding: 2rem 1rem; }

.acct-dm-msgs {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0;
  display: grid;
  gap: 0.7rem;
  flex: 1;
  overflow-y: auto;
}
.acct-dm-msg {
  max-width: 32rem;
  background: var(--bg-soft, rgba(109,40,217,0.04));
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
}
/* Your own sit to the right, so a glance says who is speaking without a name. */
.acct-dm-msg.is-mine {
  margin-left: auto;
  background: var(--bg-raised);
  border-color: var(--rule-strong, rgba(109,40,217,0.15));
}
.acct-dm-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.acct-dm-meta {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin: 0.35rem 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--text-dim);
}
.acct-dm-unsend {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
}
.acct-dm-unsend:hover { text-decoration: underline; }

.acct-dm-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: end;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
}
.acct-dm-form textarea {
  width: 100%;
  resize: vertical;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong, rgba(109,40,217,0.15));
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
}
.acct-dm-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.acct-dm-form button[disabled] { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 760px) {
  .acct-dm { grid-template-columns: 1fr; }
  .acct-dm-list {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    max-height: 240px;
  }
  .acct-dm-thread { max-height: none; }
}

/* The Message control on someone else's profile, and the line that explains
   its absence. */

/* ─── The three views ─────────────────────────────────────────────────────────
   Tabs, not pages. A tab list is not site navigation, so it is a div with
   role="tablist" rather than a <nav> — the site's own `nav` rule is fixed to
   the top of the window, and a tab strip that pinned itself over the masthead
   was exactly what happened when this was a <nav>. */

.acct-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 3rem;
  margin: 1.6rem auto 0;
  max-width: 1300px;
  border-bottom: 1px solid var(--rule);
}
.acct-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.95rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.acct-tab:hover { color: var(--text); }
.acct-tab.is-on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* Settings sits apart: it is where things are changed, not browsed. */
.acct-tab-icon { margin-left: 0; }
.acct-tab-icon svg { flex: none; }

@media (max-width: 700px) {
  .acct-tabs { padding: 0 1.1rem; gap: 0.1rem; }
  .acct-tab { padding: 0.55rem 0.6rem; font-size: 0.8rem; }
  .acct-tab-icon span { display: inline; }
}

/* ─── The summary bar ─────────────────────────────────────────────────────────
   Four numbers, at the top of the private view and again on the profile. */

.acct-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.8rem;
}
.acct-sum-cell {
  background: var(--bg-raised);
  padding: 0.95rem 1rem;
  text-align: center;
}
.acct-sum-n {
  display: block;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.acct-sum-label {
  display: block;
  margin-top: 0.1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (max-width: 620px) {
  .acct-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Your collection, as spines ──────────────────────────────────────────────
   The front page's shelf classes do the work; these only give it room and a
   sensible empty state. */

.spine-shelf { margin: 1.2rem 0 0; }
.spine-shelf .shelf-row + .shelf-row { margin-top: 0.4rem; }
.spine-empty {
  margin: 1rem 0 0;
  font-style: italic;
}

.spine-detail {
  position: relative;
  margin-top: 1.2rem;
  max-width: 46ch;
}
.spine-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: none;
  border: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
}
.spine-close:hover { color: var(--text); }
.spine-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  margin: 0 1.5rem 0 0;
}
/* Scoped to the opened card on purpose. `.spine-author` is also the front
   page's own class for the author printed down the side of a spine — set
   vertical, absolutely positioned and rotated — and that rule was reaching
   into this card and standing the author's name on its end. Same name, two
   jobs; the card says which one it means. */
.spine-detail .spine-author,
.spine-detail .spine-series,
.spine-detail .spine-finished {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--text-mid);
  margin: 0.2rem 0 0;
  /* Undo the spine treatment, whichever of the two rules lands last. */
  writing-mode: horizontal-tb;
  position: static;
  transform: none;
  white-space: normal;
  padding: 0;
  letter-spacing: normal;
}
.spine-detail .spine-series { color: var(--text-dim); font-style: italic; }
.spine-detail .spine-finished { color: var(--text-dim); font-size: 0.76rem; }
.spine-rating {
  display: block;
  margin-top: 0.5rem;
  color: var(--accent);
  letter-spacing: 0.12em;
}
.spine-rating-off { color: var(--rule-strong, rgba(109,40,217,0.15)); }
.spine-notes {
  margin: 0.7rem 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text);
}
.spine-withheld {
  margin: 0.5rem 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-dim);
}
.spine-link { margin: 0.7rem 0 0; font-size: 0.8rem; }
.spine-link a { color: var(--accent); text-decoration: none; }
.spine-link a:hover { text-decoration: underline; }

/* ─── My profile ──────────────────────────────────────────────────────────── */

.acct-profile-card { margin-bottom: 1.6rem; }
.acct-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.acct-profile-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0.2rem 0 0.3rem;
}
.acct-profile-explain { margin-top: 0.9rem; max-width: 60ch; }

.acct-preview-as {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.acct-preview-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 0.2rem;
}
.acct-chip {
  border: 1px solid var(--rule-strong, rgba(109,40,217,0.15));
  background: var(--bg);
  border-radius: 100px;
  padding: 0.34rem 0.8rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--text-mid);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.acct-chip:hover { border-color: var(--accent); color: var(--accent); }
.acct-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.acct-view-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.acct-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ─── Settings ────────────────────────────────────────────────────────────── */

.acct-set-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.acct-set-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.acct-set-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.acct-set-value {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.acct-name-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: start;
  margin-top: 0.4rem;
}
.acct-suggests {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}
.shelf-optional {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-dim);
}

/* Deleting an account is the one destructive thing here, and it looks it. */
.acct-danger-section { margin-top: 2.6rem; }
.acct-danger {
  border-color: rgba(185,28,28,0.28);
  background: rgba(185,28,28,0.03);
}
.acct-kept {
  margin: 0.6rem 0 0.9rem;
  padding-left: 1.1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-mid);
}
.acct-danger .shelf-input { margin-top: 0.4rem; max-width: 22rem; }

/* Answering a reply where you read it. */
.acct-answer { margin-top: 0.7rem; }
.acct-answer textarea {
  width: 100%;
  resize: vertical;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong, rgba(109,40,217,0.15));
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
}
.acct-answer textarea:focus { outline: none; border-color: var(--accent); }
.acct-answer .acct-row-actions { margin-top: 0.55rem; }

/* A focused reading workspace: one destination at a time. */
.acct-head, .acct-tabs, .acct-wrap { max-width: 1120px; }
.acct-head .acct-h { font-size: clamp(2rem, 4.5vw, 3.2rem); max-width: 22ch; }
.acct-head .ed-dek { font-size: 1rem; }
.acct-tabs {
  margin-top: 2rem;
  padding-bottom: .55rem;
  gap: .3rem;
  border-bottom: 1px solid var(--rule-strong);
  overflow-x: auto;
  scrollbar-width: thin;
}
.acct-tab { flex: none; border: 0; border-radius: 7px; min-height: 44px; padding: .7rem 1rem; font-family: 'DM Sans', sans-serif; }
.acct-tab.is-on { background: #eee8fc; color: #5823ac; }
.acct-tab-icon svg { display: none; }
.acct-wrap { padding-top: 2rem; padding-bottom: 6rem; }
.acct-view, #acctLibraryContent { display: grid; gap: 1.8rem; }
.acct-section-intro { padding-bottom: .25rem; }
.acct-section-intro .acct-h { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: .8rem 0 .45rem; }
.acct-scope { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 5px; background: #efedf4; color: #615d70; font: 600 .66rem 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.acct-scope::before { content: ''; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 2px; }
.acct-scope.is-public { background: #eee8fc; color: #632ab4; }
.acct-section { gap: .65rem; }
.acct-section > .acct-h { font-size: 1.4rem; }
.acct-card { border-radius: 10px; padding: 1.5rem; box-shadow: none; }
.acct-summary { margin: 0; gap: 0; border-radius: 8px; max-width: 780px; background: none; }
.acct-sum-cell { padding: .9rem 1.1rem; text-align: left; border-right: 1px solid var(--rule); }
.acct-sum-cell:last-child { border: 0; }
.acct-sum-n { font-size: 1.5rem; color: var(--text); }
.acct-sum-label { font-size: .64rem; letter-spacing: .03em; }
.shelf-form-card > summary { font: 700 1rem 'Syne', sans-serif; color: var(--text); cursor: pointer; min-height: 24px; }
.shelf-form-card > summary span { display: inline; margin-left: .7rem; font: 400 .8rem 'DM Sans', sans-serif; color: var(--text-dim); }
.shelf-form-card[open] > summary { padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.2rem; }
.shelf-form-card #shelfFormTitle { font-size: .9rem; }
.shelf-form-grid { gap: 1rem; }
.shelf-form-card .shelf-hint { font-size: .75rem; }
.acct-post { border-radius: 10px; box-shadow: none; }
.acct-post:hover, .acct-stat:hover { transform: none; box-shadow: none; }
.acct-post-body { line-height: 1.75; overflow-wrap: anywhere; }
.acct-person-name { text-decoration: none; }
.acct-person-name:hover { color: var(--accent); text-decoration: underline; }
.acct-activity-card { margin-top: .7rem; }
.acct-profile-card { margin-bottom: 0; }
.acct-profile-bio { font: 400 .95rem/1.7 'DM Sans', sans-serif; margin-top: 1rem; white-space: normal; overflow-wrap: anywhere; }
.acct-bio-form { display: grid; gap: .7rem; }
.acct-bio-form .acct-note { margin: 0; }
.acct-bio-form textarea { min-height: 100px; resize: vertical; width: 100%; }
.acct-wrap textarea.shelf-input { border-radius: 8px; }
.acct-bio-form .acct-row-actions { margin: 0; justify-content: space-between; }
.acct-newsletter { border-top: 1px solid var(--rule); padding-top: 1.3rem; margin-top: 1.3rem; }
.acct-preview-as { gap: .65rem; }
.acct-chip { min-height: 36px; }
.acct-danger-section { padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.acct-danger-section > .acct-h { font-size: 1.25rem; }
.acct-wrap :is(button, a, input, textarea, select, summary):focus-visible,
.acct-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 700px) {
  .acct-head { padding: 6rem 1.25rem 0; }
  .acct-tabs { margin-top: 1.6rem; padding: 0 1.25rem .5rem; }
  .acct-tab { padding: .65rem .8rem; font-size: .8rem; }
  .acct-wrap { padding: 1.5rem 1.25rem 5rem; }
  .acct-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two per row: the cell at the right edge of each row must not carry the
     divider, or it draws a stray line down the outside of the bar. */
  .acct-sum-cell { padding: .85rem .65rem; }
  .acct-sum-cell:nth-child(2n) { border-right: 0; }
  .acct-sum-label { font-size: .59rem; }
  .acct-card { padding: 1.15rem; }
  .shelf-form-card > summary span { display: block; margin: .45rem 0 0; }
  .acct-profile-name { font-size: 1.3rem; overflow-wrap: anywhere; }
  .acct-preview-as { align-items: stretch; }
  .acct-preview-label { width: 100%; }
  .acct-chip { text-align: left; font-size: .75rem; }
  .shelf-priv-row { align-items: flex-start; }
  .shelf-priv-toggle { max-width: 100%; }
  .shelf-priv-btn { min-height: 40px; }
}

/* ─── The profile, drawn by js/profile-view.js ──────────────────────────────
   Used by both the Public profile tab and /reader, so these live here rather
   than in either page's own stylesheet. */

.reader-head-text { min-width: 0; }

.reader-avatar.is-emoji {
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reader-edit {
  align-self: flex-start;
  white-space: nowrap;
}

.reader-open-as {
  display: inline-block;
  margin-top: 1rem;
}

/* The editor that replaces the card's static half. */
.reader-editor { display: block; }

.reader-emoji-set {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.reader-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 6px;
  margin-top: 0.5rem;
}

.reader-emoji {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-raised);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.reader-emoji:hover { border-color: var(--border-strong); }

.reader-emoji.is-on {
  border-color: var(--accent);
  background: rgba(109, 40, 217, 0.1);
  box-shadow: 0 0 0 1px var(--accent);
}

/* The shelf sits above the discussions: it is what a reader came to see. */
.reader-shelf-section { margin-bottom: 2rem; }

.reader-withheld {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: -1rem 0 1.6rem;
}

/* One book's genre, under its series. */
.spine-genre {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0.2rem 0 0;
}

/* The reader's own genre, typed rather than chosen. */
.shelf-genre-custom { margin-top: 0.5rem; }

/* The newsletter, now a preference rather than a one-way button. */
.acct-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.9rem 0 0;
  cursor: pointer;
}

.acct-check input {
  width: 16px;
  height: 16px;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
  flex: none;
}

/* The accent word: colour, not a change of face. See the note in styles.css. */
.acct-h em,
.reader-card h1 em,
.acct-profile-name em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--accent);
}