v3: tracked down many visual inconsistencies, added two new themes

src/App.css

@@ -20,7 +20,7 @@
   font-style: italic;
 }
 .md code {
-  font-family: monospace;
+  font-family: var(--font-mono, monospace);
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: 3px;
@@ -131,10 +131,14 @@
 .dump-title-view {
   position: relative;
   display: inline-flex;
-  align-items: baseline;
+  align-items: center;
   gap: 0.4rem;
   border-radius: 6px;
   max-width: 100%;
+  /* Padding gives the hover box breathing room (incl. right of the pencil);
+     the matching negative margin keeps the title's visual position unchanged. */
+  padding: 0.1rem 0.45rem;
+  margin: -0.1rem -0.45rem;
 }
 
 .dump-title-view--editable {
@@ -147,7 +151,9 @@
 
 .dump-title-edit-btn {
   font-size: 0.85rem;
-  color: var(--color-muted);
+  line-height: 1;
+  flex-shrink: 0;
+  color: var(--color-text-muted);
   opacity: 0;
   transition: opacity 0.1s;
   pointer-events: none;
@@ -164,18 +170,34 @@
   gap: 0.5rem;
 }
 
+/* Shared chrome for inline-edit inputs (the editors that live outside `.form`).
+   Each rule below adds only its own size / weight / width deltas. */
+.dump-title-input,
+.profile-email-input,
+.playlist-edit-input,
+.playlist-edit-textarea {
+  border: 2px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.dump-title-input:focus,
+.profile-email-input:focus,
+.playlist-edit-input:focus,
+.playlist-edit-textarea:focus {
+  border-color: var(--color-accent);
+}
+
 .dump-title-input {
   flex: 1;
   min-width: 12rem;
   padding: 0.4rem 0.6rem;
-  border-radius: 8px;
-  border: 2px solid var(--color-border);
-  background-color: var(--color-bg);
-  color: var(--color-text);
   font-size: 1.25rem;
   font-weight: 700;
-  font-family: "Saira", sans-serif;
-  outline: none;
 }
 
 .dump-title-error {
@@ -294,7 +316,7 @@
   background-color: var(--color-bg);
   color: var(--color-text);
   font-size: 1rem;
-  font-family: "Saira", sans-serif;
+  font-family: var(--font-body);
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
@@ -384,41 +406,12 @@
   color: var(--color-text);
 }
 
-/* ── New dump form ── */
-.dump-create-wrapper {
-  width: 100%;
-  max-width: 520px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  animation: page-enter 0.2s ease both;
-}
-
-.dump-create-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0 0.25rem;
-}
-
 .dump-create-title {
   margin: 0;
   font-size: 1.4rem;
   font-weight: 700;
 }
 
-.dump-create-form {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  background: var(--color-surface);
-  border-radius: 14px;
-  border: 1.5px solid var(--color-border);
-  padding: 1.5rem;
-}
-
 /* ── Mode toggle — segmented control ── */
 .visibility-toggle {
   display: flex;
@@ -452,12 +445,6 @@
   background: color-mix(in srgb, var(--color-accent) 12%, transparent);
 }
 
-.file-input-info {
-  margin: 0.25rem 0 0;
-  font-size: 0.85rem;
-  opacity: 0.7;
-}
-
 /* ── FileDropZone ── */
 .fdz-wrapper {
   display: flex;
@@ -600,37 +587,6 @@
   display: block;
 }
 
-.local-preview-generic {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.85rem 1rem;
-  border-radius: 10px;
-  background: var(--color-bg);
-  border: 2px solid var(--color-border);
-}
-
-.local-preview-icon {
-  font-size: 1.5rem;
-  flex-shrink: 0;
-}
-
-.local-preview-name {
-  font-weight: 600;
-  font-size: 0.95rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.local-preview-size {
-  margin-left: auto;
-  font-size: 0.8rem;
-  opacity: 0.5;
-  flex-shrink: 0;
-}
-
 .preview-loading {
   margin: 0;
   font-size: 0.85rem;
@@ -693,44 +649,6 @@
   background: var(--color-accent-hover);
 }
 
-.file-preview-audio-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1rem 1.25rem;
-  border: 2px solid var(--color-border);
-  border-radius: 10px;
-  background: var(--color-bg);
-  cursor: pointer;
-  color: var(--color-text);
-  width: 100%;
-  font-size: 0.95rem;
-  transition: border-color 0.15s;
-}
-
-.file-preview-audio-btn:hover {
-  border-color: var(--color-accent);
-}
-
-.file-preview-audio-icon {
-  font-size: 1.5rem;
-  flex-shrink: 0;
-}
-
-.file-preview-audio-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: left;
-}
-
-.file-preview-audio-play {
-  flex-shrink: 0;
-  opacity: 0.5;
-}
-
 /* ── Video player ── */
 .video-player {
   width: 100%;
@@ -1030,6 +948,14 @@
   background: var(--color-soundcloud);
 }
 
+/* Brand badges sit on a saturated brand colour — use the fixed white
+   foreground rather than the accent-tuned `on-accent` of the generic badge. */
+.rich-content-card--youtube .rich-content-badge,
+.rich-content-card--bandcamp .rich-content-badge,
+.rich-content-card--soundcloud .rich-content-badge {
+  color: var(--color-on-brand);
+}
+
 /* ── Global persistent player ── */
 .global-player {
   position: fixed;
@@ -1090,6 +1016,13 @@
   min-height: 0;
   border-radius: 0 0 8px 8px;
 }
+
+/* Inside the global player the shell already draws the border — drop the
+   nested media player's own border so it isn't doubled up. */
+.global-player .audio-player,
+.global-player .video-player {
+  border: none;
+}
 .global-player iframe {
   width: 100%;
   border: none;
@@ -1118,9 +1051,6 @@
 body.has-player {
   padding-bottom: var(--player-height, 0px);
 }
-body.has-player .fab-new {
-  bottom: calc(var(--player-height, 0px) + 1rem);
-}
 .rich-content-thumbnail-btn {
   position: relative;
   padding: 0;
@@ -1179,10 +1109,12 @@ body.has-player .fab-new {
   min-width: 0;
 }
 
+/* Generic badge (unknown providers) — themed accent. Brand providers override
+   the background below and switch to the fixed white `on-brand` foreground. */
 .rich-content-badge {
   display: inline-block;
-  background: var(--color-youtube);
-  color: var(--color-text);
+  background: var(--color-accent);
+  color: var(--color-on-accent);
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -1200,15 +1132,25 @@ body.has-player .fab-new {
   word-break: break-word;
 }
 
+/* Multi-line truncation boilerplate. Each owner sets its own
+   `-webkit-line-clamp` line count; this group carries the rest. */
+.rich-content-description,
+.dump-card-comment,
+.playlist-card-description,
+.journal-card-title,
+.journal-card--image .journal-card-comment,
+.journal-card-quote-body {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 .rich-content-description {
   margin: 0;
   font-size: 0.85rem;
   opacity: 0.75;
-  display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
 .rich-content-url {
@@ -1322,24 +1264,30 @@ body.has-player .fab-new {
   cursor: default;
 }
 
-.vote-count-clickable {
+/* Clickable counts. Padding + matching negative margin enlarge the click
+   target without shifting layout — the box grows, its visual position holds. */
+.vote-count-clickable,
+.like-count-clickable {
   display: inline-block;
   cursor: pointer;
-  /* Padding+matching negative margin enlarges the click target without
-     shifting layout — the box grows but its visual position is unchanged. */
-  padding: 0.4rem;
-  margin: -0.4rem;
 }
 
-.vote-count-clickable:hover {
+.vote-count-clickable:hover,
+.like-count-clickable:hover {
   text-decoration: underline;
 }
 
+.vote-count-clickable {
+  padding: 0.4rem;
+  margin: -0.4rem;
+}
+
 /* ── Dump OP line ── */
 .dump-op {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.5rem;
   font-size: 0.85rem;
   opacity: 0.7;
 }
@@ -1348,6 +1296,8 @@ body.has-player .fab-new {
   font-weight: 600;
   color: var(--color-text);
   text-decoration: none;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .dump-op-link:hover {
@@ -1616,18 +1566,8 @@ body.has-player .fab-new {
   width: min(260px, 100%);
   padding: 0.35rem 0.6rem;
   border-radius: 6px;
-  border: 2px solid var(--color-border);
-  background-color: var(--color-bg);
-  color: var(--color-text);
   font-size: 0.85rem;
-  font-family: inherit;
   line-height: 1.5;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  outline: none;
-}
-
-.profile-email-input:focus {
-  border-color: var(--color-accent);
 }
 
 .profile-email-actions {
@@ -1742,7 +1682,7 @@ body.has-player .fab-new {
 }
 .invite-url {
   font-size: 0.75rem;
-  font-family: monospace;
+  font-family: var(--font-mono, monospace);
   color: var(--color-text-muted);
   flex: 1;
   overflow: hidden;
@@ -1807,9 +1747,7 @@ body.has-player .fab-new {
   color: var(--color-accent);
 }
 
-/* ── Border-tinted buttons ── */
-.btn-border-danger,
-.btn-border-success,
+/* ── Border-tinted button ── */
 .btn-border {
   display: inline-flex;
   align-items: center;
@@ -1825,19 +1763,11 @@ body.has-player .fab-new {
   transition: border-color 0.15s, color 0.15s, background 0.15s;
 }
 
-.btn-border-danger:hover,
-.btn-border-danger.active,
 .btn-border:hover {
   border-color: var(--color-danger);
   color: var(--color-danger);
 }
 
-.btn-border-success:hover,
-.btn-border-success.active {
-  border-color: var(--color-success);
-  color: var(--color-success);
-}
-
 /* ── ErrorCard ── */
 .error-card-wrap {
   display: flex;
@@ -1910,12 +1840,6 @@ body.has-player .fab-new {
   width: 100%;
 }
 
-.form-error {
-  color: var(--color-danger);
-  margin: 0;
-  font-size: 0.9rem;
-}
-
 /* ── Shared layout ── */
 .page-shell {
   display: flex;
@@ -1957,45 +1881,6 @@ body.has-player .fab-new {
   border-bottom: 2px solid var(--color-border);
 }
 
-/* ── Floating "+ New" button ── */
-.fab-new {
-  position: fixed;
-  bottom: 2rem;
-  right: max(1.5rem, calc((100vw - 860px) / 2 + 1.5rem));
-  z-index: 20;
-  background: var(--color-accent);
-  color: var(--color-on-accent);
-  border: none;
-  border-radius: 999px;
-  padding: 0.6rem 1.4rem;
-  font-size: 0.95rem;
-  font-weight: 700;
-  cursor: pointer;
-  box-shadow: 0 4px 20px
-    color-mix(in srgb, var(--color-accent) 50%, transparent);
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(10px) scale(0.94);
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease,
-    background 0.15s,
-    box-shadow 0.15s;
-}
-
-.fab-new--visible {
-  opacity: 1;
-  pointer-events: auto;
-  transform: none;
-}
-
-.fab-new:hover {
-  background: var(--color-accent-hover);
-  box-shadow: 0 6px 24px
-    color-mix(in srgb, var(--color-accent) 60%, transparent);
-  transform: translateY(-1px);
-}
-
 @media (min-width: 860px) {
   .app-header--has-center {
     display: grid;
@@ -2066,22 +1951,6 @@ body.has-player .fab-new {
   display: none;
 }
 
-.app-header-center:has(.search-bar--expanded) .header-center-slot {
-  flex: 1;
-  justify-content: center;
-}
-
-/* Expanded: pin center absolutely so it aligns with the feed's visual center */
-@media (min-width: 860px) {
-  .app-header-center:has(.search-bar--expanded) {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 420px;
-    pointer-events: auto;
-  }
-}
-
 /* As the center column shrinks (viewport narrow, search collapsed),
    shed content in order: presence first, then tabs (still in .index-below-header) */
 @container (max-width: 460px) {
@@ -2116,18 +1985,38 @@ body.has-player .fab-new {
   flex-wrap: nowrap;
 }
 
-/* Normalize all buttons in the header nav to the same height */
-.app-header-nav button {
-  padding: 0.35rem 0.85rem;
+/* Normalize every header-nav control to one height (search / notifications /
+   avatar / + new were all different sizes) and centre their contents — flex +
+   line-height:1 keeps text and emoji glyphs vertically centred in the box. */
+.app-header-nav button,
+.app-header-user {
+  height: 2.25rem;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 0.95rem;
   font-family: inherit;
-  line-height: inherit;
+  line-height: 1;
+}
+
+.app-header-nav button {
+  padding: 0.35rem 0.85rem;
 }
 
 .app-header-nav .btn-primary {
   padding: 0.35rem 1rem;
 }
 
+/* Icon-only controls are square, so the row reads as a tidy set. */
+.app-header-nav .nav-search-btn,
+.app-header-nav .notification-bell,
+.app-header-nav .user-menu-trigger {
+  width: 2.25rem;
+  padding: 0;
+  justify-content: center;
+}
+
 /* Ghost search button — always visible except when the center search bar is shown */
 .nav-search-btn {
   display: flex;
@@ -2548,6 +2437,26 @@ body.has-player .fab-new {
   background: var(--color-danger-hover);
 }
 
+/* ── Ghost button — chromeless icon/toggle action (e.g. global player) ── */
+.btn--ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0.3rem 0.55rem;
+  border-radius: 6px;
+  color: var(--color-text);
+  font-family: inherit;
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.btn--ghost:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--color-text) 8%, transparent);
+}
+
 /* ── Ghost icon buttons (shared base) ── */
 .modal-close-btn,
 .playlist-remove-btn,
@@ -2937,9 +2846,6 @@ body.has-player .fab-new {
   opacity: 0.65;
   word-break: break-word;
   line-height: 1.4;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
 .dump-card-comment {
@@ -3043,7 +2949,8 @@ body.has-player .fab-new {
 .playlist-card-count {
   opacity: 0.7;
 }
-.playlist-card-owner {
+.playlist-card-owner,
+.playlist-detail-owner {
   color: inherit;
   text-decoration: none;
   font-weight: 600;
@@ -3300,11 +3207,6 @@ body.has-player .fab-new {
     gap: 0.1rem;
   }
 }
-.playlist-detail-owner {
-  color: inherit;
-  text-decoration: none;
-  font-weight: 600;
-}
 .playlist-detail-owner:hover {
   color: var(--color-accent);
   opacity: 1;
@@ -3330,7 +3232,8 @@ body.has-player .fab-new {
   transition: opacity 0.15s, border-color 0.15s, color 0.15s;
 }
 
-.playlist-edit-btn:hover {
+.playlist-edit-btn:hover,
+.playlist-cancel-btn:hover {
   opacity: 1;
   border-color: var(--color-accent);
   color: var(--color-accent);
@@ -3338,17 +3241,9 @@ body.has-player .fab-new {
 
 .playlist-edit-input,
 .playlist-edit-textarea {
-  background: var(--color-bg);
-  border: 2px solid var(--color-border);
-  border-radius: 8px;
-  color: var(--color-text);
+  width: 100%;
   font-size: 0.95rem;
   padding: 0.4rem 0.65rem;
-  font-family: inherit;
-  width: 100%;
-  box-sizing: border-box;
-  outline: none;
-  transition: border-color 0.2s;
 }
 
 .playlist-edit-textarea {
@@ -3368,11 +3263,6 @@ body.has-player .fab-new {
   gap: 0.7rem;
 }
 
-.playlist-edit-input:focus,
-.playlist-edit-textarea:focus {
-  border-color: var(--color-accent);
-}
-
 .playlist-detail-meta .playlist-edit-toggle {
   opacity: 1;
 }
@@ -3431,12 +3321,6 @@ body.has-player .fab-new {
   white-space: nowrap;
 }
 
-.playlist-cancel-btn:hover {
-  opacity: 1;
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
 .drag-handle {
   cursor: grab;
   opacity: 0.35;
@@ -3472,20 +3356,6 @@ body.has-player .fab-new {
   color: var(--color-accent);
 }
 
-/* ── My Playlists page ── */
-.my-playlists-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.my-playlists-title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
 /* ── New playlist toggle (profile page header) ── */
 .new-playlist-toggle {
   background: none;
@@ -3520,28 +3390,15 @@ body.has-player .fab-new {
   color: var(--color-text-muted);
 }
 
-/* ── Comments ── */
-.comment-section {
-  margin-top: 2.5rem;
-  padding-top: 1.75rem;
-  border-top: 2px solid var(--color-border);
-}
-
-.comment-section-title {
-  font-size: 0.8rem;
-  font-weight: 700;
-  color: var(--color-text-muted);
-  margin: 0 0 1.25rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
+/* ── Comments / related (shared section chrome) ── */
+.comment-section,
 .related-section {
   margin-top: 2.5rem;
   padding-top: 1.75rem;
   border-top: 2px solid var(--color-border);
 }
 
+.comment-section-title,
 .related-section-title {
   font-size: 0.8rem;
   font-weight: 700;
@@ -3672,12 +3529,7 @@ body.has-player .fab-new {
   background: color-mix(in srgb, var(--color-text) 6%, transparent);
 }
 
-.comment-delete-btn:hover {
-  color: var(--color-danger);
-  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
-  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
-}
-
+.comment-delete-btn:hover,
 .comment-action-btn--liked {
   color: var(--color-danger);
   border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
@@ -3691,18 +3543,10 @@ body.has-player .fab-new {
 }
 
 .like-count-clickable {
-  display: inline-block;
-  cursor: pointer;
-  /* Padding+matching negative margin enlarges the click target without
-     shifting layout — the box grows but its visual position is unchanged. */
   padding: 0.3rem;
   margin: -0.3rem;
 }
 
-.like-count-clickable:hover {
-  text-decoration: underline;
-}
-
 .comment-replies {
   padding-left: max(0.4rem, calc(1.25rem - var(--depth, 0) * 0.1rem));
   margin-left: max(0.25rem, calc(1.1rem - var(--depth, 0) * 0.09rem));
@@ -3954,7 +3798,8 @@ body.has-player .fab-new {
   transition: background 0.15s, color 0.15s;
 }
 
-.follow-btn:hover {
+.follow-btn:hover,
+.follow-btn--following {
   background: var(--color-accent);
   color: var(--color-on-accent, #fff);
 }
@@ -3964,11 +3809,6 @@ body.has-player .fab-new {
   cursor: not-allowed;
 }
 
-.follow-btn--following {
-  background: var(--color-accent);
-  color: var(--color-on-accent, #fff);
-}
-
 .follow-btn--following:hover {
   background: transparent;
   color: var(--color-accent);
@@ -4056,11 +3896,8 @@ body.has-player .fab-new {
   text-decoration: none;
   line-height: 1.3;
   word-break: break-word;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
-  overflow: hidden;
 }
 
 .journal-card-title:hover {
@@ -4143,11 +3980,8 @@ body.has-player .fab-new {
   line-height: 1.4;
   margin: 0;
   color: rgba(255, 255, 255, 0.85);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
-  overflow: hidden;
 }
 
 .journal-card--feature .journal-card-title {
@@ -4171,7 +4005,7 @@ body.has-player .fab-new {
   position: absolute;
   top: -0.5rem;
   right: 0.4rem;
-  font-family: Georgia, "Times New Roman", serif;
+  font-family: var(--font-display, Georgia, "Times New Roman", serif);
   font-size: 4.5rem;
   line-height: 1;
   color: var(--color-accent);
@@ -4186,11 +4020,8 @@ body.has-player .fab-new {
   font-size: 0.92rem;
   line-height: 1.45;
   color: var(--color-text);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   line-clamp: 3;
-  overflow: hidden;
 }
 
 .journal-card--wide.journal-card--quote .journal-card-quote-body,
@@ -4706,7 +4537,7 @@ body.has-player .fab-new {
 
 .notif-icon--mention {
   font-weight: 700;
-  font-family: monospace;
+  font-family: var(--font-mono, monospace);
 }
 
 /* ── Tooltip ── */