/* ===================================================================
   THEME LAYER (owner 2026-09-28). Every single-accent highlight on the site follows the user's own theme
   colour (--theme, css/01-tokens.css; chosen in the profile's Setup > "Tint nit"). Elements that belong to
   ANOTHER user (a post, a reply, a profile page, a name hover card) use THAT user's colour instead: --author
   / --author-dark, set on the element by js/10e-utils-tabs.js (_palAuthorStyle / _palSetAuthorVars).
   Loaded LAST, and each rule is at least as specific as the one it overrides (dark-mode twins included).
   NOT themed on purpose: the two palindrome-cell colours (--blue left / --amber right).
=================================================================== */

/* ── Segmented toggles: "We I View", "Verb ban Abbrev." and Setup's "Eponymy / Nope" share one look ─── */
body.feed-active       .feed-scope-toggle .fst-we,
body:not(.feed-active) .feed-scope-toggle .fst-i { color: var(--theme); }

#btn-verb-ban-abbrev, .seg-toggle {
  display: inline-flex; align-items: stretch; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 16px;
  background: transparent; box-shadow: none; color: var(--dim);
  font-size: 11px; font-weight: 700; letter-spacing: 0; white-space: nowrap;   /* 11px: fits the footer line */
  cursor: pointer; transform: none;
}
#btn-verb-ban-abbrev:hover, .seg-toggle:hover { transform: none; background: transparent; }
#btn-verb-ban-abbrev .vba-seg, .seg-toggle .vba-seg {
  padding: 2px 8px; border-radius: 13px;
  color: var(--dim); opacity: 0.55; user-select: none;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
#btn-verb-ban-abbrev:hover .vba-seg:not(.on), .seg-toggle:hover .vba-seg:not(.on) { opacity: 0.85; }
#btn-verb-ban-abbrev .vba-seg.on, .seg-toggle .vba-seg.on {
  opacity: 1; font-weight: 900; color: var(--theme);
  background: rgba(127,127,127,0.28);
}

/* ── Chosen project / tab ───────────────────────────────────────────────────────────────────────────── */
body .ws-tab.active {
  border-bottom-color: var(--theme);
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme) 10%, transparent) 0%,
                                      color-mix(in srgb, var(--theme) 4%, transparent) 100%);
}
body .subtab-btn.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme) 14%, transparent) 0%,
                                      color-mix(in srgb, var(--theme) 6%, transparent) 100%);
  border-color: var(--theme-line);
  color: var(--theme);
}
body.dark-mode .proj-tab.active { border-color: var(--theme); }
body .proj-tab-add:hover { color: var(--theme); border-color: var(--theme); }

/* ── "+ Add a...", "Stir writs", "Post Sop" ───────────────────────────────────────────────────────────── */
body .tb-post-sop-style { color: var(--theme); }
body #feed-float-post-btn { color: var(--theme); }
body #feed-inline-slot .fcc-post-btn {
  background: var(--theme);
  border-color: color-mix(in srgb, var(--theme) 55%, transparent);
}

/* ── Avatar ring + handle: the OWNER's colour, whoever is viewing (owner 2026-09-28 / 2026-09-29) ────── */
body :is(#feed-scroll,#pp-posts-list) .fp-avatar-ring { background: var(--author, var(--theme)); }
body.dark-mode :is(#feed-scroll,#pp-posts-list) .fp-avatar-ring { background: var(--author-dark, var(--theme)); }
/* The handle carries its owner's colour at rest, not only on hover. Post cards are dark in both modes, so the
   lighter --author-dark ink is used there; elsewhere (threads, modals) the plain colour. */
body :is(#feed-scroll,#pp-posts-list) :is(.fp-handle, .fp-handle .fp-at, .fp-reply-handle, .fp-reply-handle .fp-at) {
  color: var(--author-dark, rgba(255,255,255,0.7));
}
body :is(.fp-handle-link, .fp-handle-link .fp-at) { color: var(--author, var(--blue)); }
body.dark-mode :is(.fp-handle-link, .fp-handle-link .fp-at) { color: var(--author-dark, var(--blue)); }
/* Profile page avatar frame, name hover-card avatar, and your own avatar in the bottom-left corner. */
body #pp-avatar-wrap { background: var(--author, var(--theme)); }
body.dark-mode #pp-avatar-wrap { background: var(--author-dark, var(--theme)); }
body .fp-hover-avatar { box-shadow: 0 0 0 2px var(--author, var(--theme)); }
body #auth-avatar-mini { box-shadow: 0 0 0 2px var(--theme); }   /* the outline; the face/initials stay inline (14c _authSyncUI) */
body #auth-handle-label { color: var(--theme); }

/* ── Wordbank rows: hover / active / selected wash (the left/right cell text keeps its cell colours) ──── */
body .suggest-item:hover {
  background: color-mix(in srgb, var(--theme) 7%, #fff);
  border-color: color-mix(in srgb, var(--theme) 55%, transparent);
}
body.dark-mode .suggest-item:hover { background: color-mix(in srgb, var(--theme) 12%, var(--bg2)); }
body .suggest-item.active,
body .suggest-item.wb-entry.selected,
body .entry-card.selected {
  background: color-mix(in srgb, var(--theme) 10%, transparent);
  border-color: var(--theme);
}
/* Entry text: left half in the theme, right half a deeper mix of it (the two halves stay distinguishable);
   echo / category rows keep their own tints (their rules are more specific). */
body .suggest-item .si-left,
body.dark-mode .suggest-item .si-left { color: var(--theme); }
body .suggest-item .si-right { color: color-mix(in srgb, var(--theme) 58%, var(--txt)); }
body.dark-mode .suggest-item .si-right { color: color-mix(in srgb, var(--theme) 70%, var(--txt)); }
/* Keyboard focus on a row: the theme colour, not the browser's default ring. */
body .suggest-item:focus-visible { outline: 2px solid var(--theme); outline-offset: 1px; }
/* Seam {} and borrowed seam [] letters are deliberately NOT themed (owner 2026-10-02): they use --seam-overlap /
   --seam-borrow (css/06-merge-insert.css), which js/10e-utils-tabs.js keeps clear of the theme colour. */
body.dark-mode .wb-seam-overlap {
  color: color-mix(in srgb, var(--seam-overlap, #3574c4) 70%, #fff);
  border-bottom-color: color-mix(in srgb, var(--seam-overlap, #3574c4) 70%, #fff);
}
body.dark-mode .wb-seam-borrow {
  color: color-mix(in srgb, var(--seam-borrow, #8b5cf6) 70%, #fff);
  border-bottom-color: color-mix(in srgb, var(--seam-borrow, #8b5cf6) 70%, #fff);
}
body .si-dim {
  background: color-mix(in srgb, var(--theme) 13%, transparent);
  color: var(--theme);
  outline-color: color-mix(in srgb, var(--theme) 30%, transparent);
}

/* ── Letter highlight on hover (segments, posts, composition banner) ─────────────────────────────────── */
body .cell-char.hover-lit,
body .comp-char.comp-hover-lit {
  background: color-mix(in srgb, var(--theme) 22%, transparent);
  color: var(--theme);
}
body .cell-char.hover-mirror,
body .comp-char.comp-hover-mirror {
  background: color-mix(in srgb, var(--theme) 11%, transparent);
  color: var(--theme);
}
body.dark-mode .cell-char.hover-lit,
body.dark-mode .comp-char.comp-hover-lit,
body.dark-mode .cell-char.hover-mirror,
body.dark-mode .comp-char.comp-hover-mirror { color: var(--txt); }

/* ── Feed: chosen space, "Now on" / "Swoll of Follows" / "Top Spot" ──────────────────────────────────── */
body .fsd-item.active { background: var(--theme-soft); color: var(--theme); }
body .feed-tab.active,
body .gami-tab.active { color: var(--theme); border-bottom-color: var(--theme); }
body .feed-float-tab.active { color: var(--txt); }

/* ── Profile page: the OWNER's colour (your own profile = your theme) ─────────────────────────────────── */
body #pp-handle { color: var(--author, var(--theme)); }
body.dark-mode #pp-handle { color: var(--author-dark, var(--theme)); }
body .pp-tab.active { color: var(--author, var(--theme)); border-bottom-color: var(--author, var(--theme)); }
body.dark-mode .pp-tab.active { color: var(--author-dark, var(--theme)); border-bottom-color: var(--author-dark, var(--theme)); }

/* ── Names and post buttons on hover: THAT user's colour, whoever is viewing ─────────────────────────── */
/* Scoped like the originals in css/16-post-card.css / css/17-dark-fixes.css (ID + class), so these win;
   the unscoped lines cover posts rendered elsewhere (thread view, modals). */
body :is(#feed-scroll,#pp-posts-list) .fp-display-name:hover,
body :is(#feed-scroll,#pp-posts-list) :is(.fp-handle-link:hover,.fp-handle-link:hover .fp-at,.fp-reply-handle:hover),
body .fp-display-name:hover,
body :is(.fp-handle-link:hover,.fp-handle-link:hover .fp-at,.fp-reply-handle:hover) { color: var(--author, var(--theme)); }
body.dark-mode :is(#feed-scroll,#pp-posts-list) .fp-display-name:hover,
body.dark-mode :is(#feed-scroll,#pp-posts-list) :is(.fp-handle-link:hover,.fp-handle-link:hover .fp-at,.fp-reply-handle:hover),
body.dark-mode .fp-display-name:hover,
body.dark-mode :is(.fp-handle-link:hover,.fp-handle-link:hover .fp-at,.fp-reply-handle:hover) { color: var(--author-dark, var(--theme)); }
body :is(#feed-scroll,#pp-posts-list) :is(.fp-action-btn,.fp-options-btn):hover,
body :is(.fp-action-btn,.fp-options-btn):hover { color: var(--author, var(--theme)); }
body.dark-mode #feed-scroll :is(.fp-action-btn,.fp-options-btn,.fp-reaction):hover,
body.dark-mode :is(#feed-scroll,#pp-posts-list) :is(.fp-action-btn,.fp-options-btn):hover { color: var(--author-dark, var(--theme)); }
body :is(#feed-scroll,#pp-posts-list) :is(.fp-action-btn,.rap-vote-btn):focus-visible,
body :is(.fp-action-btn,.rap-vote-btn):focus-visible { outline-color: var(--author, var(--theme)); }
body .fp-hover-handle { color: var(--author, var(--theme)); }
body.dark-mode .fp-hover-handle { color: var(--author-dark, var(--theme)); }

/* ── Wordbank footer: Warp raw and Mess 'em are one-segment .seg-toggle pills (owner 2026-10-04); the segment
   lifts on hover like an unchosen "We I View" half and fills while Mess 'em is on. ─────────────────────────── */
#btn-warp-raw:hover .vba-seg, #btn-mess-em:hover .vba-seg:not(.on) { opacity: 0.9; background: rgba(127,127,127,0.14); }
/* The frame and lettering of "We I View" itself (css/14-feed.css #btn-feed-header + .feed-scope-toggle halves). */
#wordbank-footer :is(.seg-toggle, #btn-verb-ban-abbrev), body .wiv-frame {
  border-radius: 6px; border: 1px solid rgba(175,170,163,0.40); padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
}
#wordbank-footer :is(.seg-toggle, #btn-verb-ban-abbrev) .vba-seg, body .wiv-frame .vba-seg { padding: 3px 10px; border-radius: 13px; }

/* ── "Post Sop" + "Figaro or a .gif?" on a connected Studio segment (owner 2026-10-04, js/09h-post-sop.js) ── */
.seg-postsop-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 3px 10px 5px; border-top: 1px dashed var(--line);
}
.seg-postsop-btn {
  font-size: 10px; font-weight: 800; padding: 2px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--theme-line, var(--line)); background: transparent; color: var(--theme);
}
.seg-postsop-btn:hover { background: var(--theme-soft, rgba(127,127,127,0.14)); }
.figaro-toggle { font-size: 10px; padding: 2px; }
.figaro-toggle .vba-seg { padding: 1px 7px; }
.figaro-toggle .fig-mid { align-self: center; padding: 0 2px; color: var(--dim); opacity: 0.55; user-select: none; }
.figaro-toggle .fig-q { padding: 0 3px 0 0; }
.fcc-figaro-row { display: flex; justify-content: flex-end; padding: 2px 10px 6px; }
.fp-gif-post img, .fp-quote-gif { user-select: none; -webkit-user-drag: none; }
.fp-quote-gif { display: block; max-width: 100%; border-radius: 6px; }

/* ── Other single-accent states ──────────────────────────────────────────────────────────────────────── */
body .corner-menu-item:hover { background: var(--theme-soft); color: var(--theme); }
body .admin-persp-item.active { background: var(--theme-soft); color: var(--theme); }

/* ── Theme picker (Setup > "Tint nit") ───────────────────────────────────────────────────────────────── */
.su-theme-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.su-theme-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line);
  padding: 0;
}
.su-theme-swatch.on { border-color: var(--txt); }
.su-theme-swatch:focus-visible { outline: 2px solid var(--theme); outline-offset: 2px; }
/* Setup > "Maestro sort-seam" (owner 2026-10-02): a swatch too close to the theme or the other seam is crossed out. */
.su-seam-line { display: flex; align-items: center; gap: 8px; }
.su-seam-line + .su-seam-line { margin-top: 6px; }
.su-seam-mark { font-weight: 800; color: var(--dim); min-width: 22px; font-family: monospace; }
.su-swatch-blocked { opacity: 0.3; cursor: not-allowed;
  background-image: linear-gradient(135deg, transparent 45%, var(--txt) 45%, var(--txt) 55%, transparent 55%) !important; }

/* ── Active segment + letter selection ──────────────────────────────────────────────────────────────── */
body .seg-box.active {
  border-color: color-mix(in srgb, var(--theme) 70%, transparent);
  background: color-mix(in srgb, var(--theme) 3%, #fff);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--theme) 15%, transparent);
}
body.dark-mode .seg-box.active {
  background: color-mix(in srgb, var(--theme) 12%, transparent);
  border-color: color-mix(in srgb, var(--theme) 65%, transparent);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--theme) 20%, transparent);
}
body :is(.cell-char, .cell-spacer).palin-sel { background: color-mix(in srgb, var(--theme) 22%, transparent); }
body :is(.cell-char, .cell-spacer).palin-sel-mirror { background: color-mix(in srgb, var(--theme) 11%, transparent); }
body .cell-char::selection,
body .cell-spacer::selection { background: color-mix(in srgb, var(--theme) 30%, transparent); }

/* ── Connected odd segment: the right side's duplicate of the shared centre letter is not drawn (09c) ──── */
.fc-odd-connected .fc-odd-dup { display: none; }

/* ── Setup "Save" buttons ───────────────────────────────────────────────────────────────────────────── */
body .su-save { background: var(--theme); }
body.dark-mode .su-save { background: var(--theme); }

/* ── Post-type label + letter hover: the OWNER's colour (owner 2026-09-29) ──────────────────────────── */
/* "Lob Obol", "Day Dyad", "Art Xtra"...: was a fixed amber; now the post author's colour (cards are dark). */
body :is(#feed-scroll,#pp-posts-list) .fp-actions .fp-type-label { color: var(--author-dark, var(--theme)); }
/* Hovered letter + its mirror in a post or reply: that text's author's colour. */
body .fp-letter-hi {
  background: color-mix(in srgb, var(--author-dark, var(--theme)) 26%, transparent);
  color: var(--author-dark, var(--theme));
}
/* Studio cells and the compose card's cells (your own text): your theme. The hovered run is the full tint,
   its mirror a fainter one, so the two stay distinguishable. */
body .cell-char.hover-lit, body .comp-char.comp-hover-lit {
  background: color-mix(in srgb, var(--theme) 24%, transparent);
  color: var(--theme);
}
body .cell-char.hover-mirror, body .comp-char.comp-hover-mirror {
  background: color-mix(in srgb, var(--theme) 11%, transparent);
  color: color-mix(in srgb, var(--theme) 75%, var(--txt));
}
body.dark-mode .cell-char.hover-lit, body.dark-mode .comp-char.comp-hover-lit { color: var(--theme); }   /* beats the 17-dark-fixes --txt override */
body.dark-mode :is(#feed-scroll,#pp-posts-list) :is(.rap-header .rap-type-label, .lob-title) { color: var(--author-dark, var(--amber)); }   /* owner-colour Rap Spar / Lob Obol titles, dark ink */

/* "online / nil / no": the highlighted word takes the POST AUTHOR's colour (owner 2026-09-29), dark-card ink. */
body :is(#feed-scroll,#pp-posts-list) :is(.fp-presence[data-st="online"] .pw-online, .fp-presence[data-st="nil"] .pw-nil, .fp-presence[data-st="no"] .pw-no) { color: var(--author-dark, var(--theme)); }

/* ── Quoted post: name + handle behave like the main post's (owner 2026-10-01) ──────────────────────────── */
/* The quote wrapper carries the QUOTED author's --author / --author-dark (11c), so these follow that user. */
.fp-quote-name, .fp-quote-handle { cursor: pointer; transition: color 0.12s; }
body :is(#feed-scroll,#pp-posts-list) :is(.fp-quote-handle, .fp-quote-handle .fp-at) { color: var(--author-dark, var(--fp-quiet)); }
body .fp-quote-name:hover,
body :is(#feed-scroll,#pp-posts-list) .fp-quote-name:hover { color: var(--author, var(--theme)); }
body.dark-mode .fp-quote-name:hover,
body.dark-mode :is(#feed-scroll,#pp-posts-list) .fp-quote-name:hover { color: var(--author-dark, var(--theme)); }
body .fp-quote-handle:hover,
body :is(#feed-scroll,#pp-posts-list) :is(.fp-quote-handle:hover, .fp-quote-handle:hover .fp-at) {
  color: var(--author, var(--theme)); text-decoration: underline; text-underline-offset: 2px;
}
body.dark-mode :is(#feed-scroll,#pp-posts-list) :is(.fp-quote-handle:hover, .fp-quote-handle:hover .fp-at) { color: var(--author-dark, var(--theme)); }
.fp-quote-rx:empty { display: none; }

/* ── Day Dyad: the one golden card on the feed (owner 2026-10-01) ─────────────────────────────────────── */
/* No colour wash over the card (it read as a "weird tint"): the card keeps the normal surface and the gold is
   carried by the edge, the glow, the top shine and the accents. The card's --author / --author-dark are set to
   gold by 11c, so the avatar ring, handle, letter hover, presence word and type label all turn gold too. */
body :is(#feed-scroll,#pp-posts-list) .feed-post.potd,
body.dark-mode :is(#feed-scroll,#pp-posts-list) .feed-post.potd { background: transparent; border-color: transparent; box-shadow: none; }
body :is(#feed-scroll,#pp-posts-list) .feed-post.potd > .fp-card-clip {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--fp-surface), var(--fp-surface)) padding-box,
    linear-gradient(115deg, #8a6212 0%, #f3d27a 22%, #c8960c 45%, #fbe7a1 68%, #a87a08 100%) border-box;
  background-size: 100% 100%, 300% 100%;
  background-position: 0 0, 0% 50%;
  box-shadow: 0 0 18px rgba(212, 160, 23, 0.22), 0 4px 18px rgba(138, 98, 18, 0.12);
  animation: potd-sheen 9s ease-in-out infinite alternate;
}
@keyframes potd-sheen {
  from { background-position: 0 0, 0% 50%; }
  to   { background-position: 0 0, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(#feed-scroll,#pp-posts-list) .feed-post.potd > .fp-card-clip { animation: none; }
}
body :is(#feed-scroll,#pp-posts-list) .feed-post.potd:hover > .fp-card-clip {
  box-shadow: 0 0 26px rgba(212, 160, 23, 0.32), 0 6px 22px rgba(138, 98, 18, 0.16);
}
body :is(#feed-scroll,#pp-posts-list) .feed-post.potd > .fp-card-clip > .fp-band {
  opacity: 0.85;
  background:
    linear-gradient(135deg,
      transparent calc(var(--lp, 50%) - 18%),
      rgba(255, 236, 170, 0.75) var(--lp, 50%),
      transparent calc(var(--lp, 50%) + 18%)),
    radial-gradient(ellipse at 50% 50%, rgba(212, 160, 23, 0.6), rgba(212, 160, 23, 0.18));
}
body :is(#feed-scroll,#pp-posts-list) .feed-post.potd .fp-actions .fp-type-label { font-weight: 800; }

/* ── Golden users: bots always, the owner when he picks gold (owner 2026-10-02) ────────────────────────── */
/* The Day Dyad colouring without the Day Dyad card: their --author / --author-dark are the Day Dyad golds (10e
   maps the reserved gold to the card's dark ink), so ring, handle, hover, presence word and type label are gold
   already. Names share quoted-name ink (owner 2026-10-06). */

/* ── Post/reply footer on the card's bottom edge (owner 2026-10-05) ───────────────────────────────────────
   css/16-post-card.css moved the footer into the text column (right under the body). This makes that column a
   vertical flex box whose footer takes the leftover space above it, so when the avatar column is the taller one
   (a title under the avatar) the button row still sits on the bottom edge: "the last row of buttons ... still has
   to be close to the bottom edge of the post". The column's children are all block-level or absolute (name, date,
   @handle row, body, footer); the streak badge lives inside the name (js/11c-post-card.js), so it keeps its line. */
:is(#feed-scroll,#pp-posts-list) .fp-card-content { display: flex; flex-direction: column; }
:is(#feed-scroll,#pp-posts-list) .fp-card-content > .fp-card-footer { margin-top: auto; }

/* ── Avatar + name hover on posts and replies (owner 2026-10-01) ──────────────────────────────────────── */
/* No hover card any more (it repeated the post): hovering the avatar lights up its owner-coloured outline. */
:is(#feed-scroll,#pp-posts-list) .fp-avatar-ring { transition: background-color 0.15s; }
body :is(#feed-scroll,#pp-posts-list) .fp-avatar-ring:hover { background: color-mix(in srgb, var(--author, var(--theme)) 70%, #fff); }
body.dark-mode :is(#feed-scroll,#pp-posts-list) .fp-avatar-ring:hover { background: color-mix(in srgb, var(--author-dark, var(--theme)) 75%, #fff); }
/* Owner 2026-10-05: hovering no longer SHRINKS the avatar (it went 56 -> 52px); the outline just brightens (above).
   And the outline must be EVEN on all four sides. It used to be the ring's colour showing around a smaller inner
   avatar: two boxes, each snapped to whole device pixels on its own, so at a fractional position (browser zoom) one
   side came out a pixel thinner. Rounded ("av-tv") rings now draw it as ONE box's border over an avatar that fills
   the ring, which the browser snaps as a whole, so all four sides match. The notched ring (av-notch, two accounts)
   keeps the clip-shaped outline, which a border cannot follow along its diagonal corners. */
:is(#feed-scroll,#pp-posts-list) .fp-avatar-ring.av-tv { --ring-w: 3px; }
:is(#feed-scroll,#pp-posts-list) .fp-reply-item .fp-avatar-ring.av-tv { --ring-w: 2px; }
:is(#feed-scroll,#pp-posts-list) .fp-avatar-ring.av-tv .fp-avatar { width: 100%; height: 100%; }
body :is(#feed-scroll,#pp-posts-list) .fp-avatar-ring.av-tv::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: var(--ring-w) solid var(--author, var(--theme)); border-radius: inherit;
  transition: border-color 0.15s;
}
body.dark-mode :is(#feed-scroll,#pp-posts-list) .fp-avatar-ring.av-tv::after { border-color: var(--author-dark, var(--theme)); }
body :is(#feed-scroll,#pp-posts-list) .fp-avatar-ring.av-tv:hover::after { border-color: color-mix(in srgb, var(--author, var(--theme)) 70%, #fff); }
body.dark-mode :is(#feed-scroll,#pp-posts-list) .fp-avatar-ring.av-tv:hover::after { border-color: color-mix(in srgb, var(--author-dark, var(--theme)) 75%, #fff); }
/* The name underlines on hover like the @handle under it. */
body :is(#feed-scroll,#pp-posts-list) :is(.fp-display-name, .fp-quote-name):hover,
body :is(.fp-display-name, .fp-quote-name):hover { text-decoration: underline; text-underline-offset: 2px; }


/* ── Owner 2026-10-04 (third list) ─────────────────────────────────────────────────────────────────────────── */
/* Icons in the "We I View" style (css/13-ctx-gami.css .fst-ico): 14 px, stroke 2.2, the text's own colour. */
.wiv-ico { width: 14px; height: 14px; stroke-width: 2.2; flex-shrink: 0; vertical-align: -2px; }
.vba-seg > .wiv-ico { margin-right: 5px; }
.corner-menu-item { display: flex; align-items: center; gap: 9px; }
.fsd-item > .wiv-ico, .feed-float-tab > .wiv-ico { margin-right: 7px; }
/* A long space name wraps onto the next line instead of being cut with an ellipsis (owner 2026-10-04). */
body .fsd-item { display: flex; align-items: flex-start; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
body .fsd-item > .wiv-ico { margin-top: 1px; }
#btn-verb-ban-abbrev > .wiv-ico { align-self: center; margin: 0 4px 0 2px; opacity: 0.7; }
/* Header "Set sate tastes" in the We I View frame (overrides css/03-header.css #btn-prefs-header). */
body #btn-prefs-header.wiv-frame {
  display: inline-flex; align-items: stretch; background: transparent; color: var(--dim); margin-right: 8px; cursor: pointer;
  border-radius: 6px; border: 1px solid rgba(175,170,163,0.40); padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: normal;
}
body #btn-prefs-header.wiv-frame .vba-seg { display: inline-flex; align-items: center; opacity: 0.85; }
body #btn-prefs-header.wiv-frame:hover .vba-seg { opacity: 1; background: rgba(127,127,127,0.14); color: var(--txt); }

/* "Verb ban Abbrev.": three fixed parts (Verb | ban | Abbrev.) whose places never move; only the highlight does.
   Each part reserves its bold width (the hidden ::after copy), so the weight change cannot shift the text.
   Neutral + hover: a lighter highlight previews the side a click would choose (js/08a-panels-ui.js). */
#wordbank-footer #btn-verb-ban-abbrev { gap: 0; }
#wordbank-footer #btn-verb-ban-abbrev .vba-seg { display: inline-grid; padding: 3px 5px; border-radius: 0; }
#btn-verb-ban-abbrev .vba-seg > span, #btn-verb-ban-abbrev .vba-seg::after { grid-area: 1 / 1; }
#btn-verb-ban-abbrev .vba-seg::after { content: attr(data-t); font-weight: 900; visibility: hidden; height: 0; overflow: hidden; }
/* Padding belongs to the word's place (outer ends wider), never to the highlight, so nothing moves. */
#wordbank-footer #btn-verb-ban-abbrev .vba-seg[data-i="0"] { padding-left: 10px; }
#wordbank-footer #btn-verb-ban-abbrev .vba-seg[data-i="2"] { padding-right: 10px; }
#wordbank-footer #btn-verb-ban-abbrev .vba-seg.vba-l { border-top-left-radius: 13px; border-bottom-left-radius: 13px; }
#wordbank-footer #btn-verb-ban-abbrev .vba-seg.vba-r { border-top-right-radius: 13px; border-bottom-right-radius: 13px; }
#wordbank-footer #btn-verb-ban-abbrev .vba-seg.vba-peek { opacity: 0.9; background: rgba(127,127,127,0.14); }

/* Segment-colour picker (owner 2026-10-05): one rainbow strip, two handles (A = first segment, B = last). The
   strip outside the A..B band is dimmed (#prefs-hue-dim-l/-r, sized by _prefsHuePreview), so the lit band is the
   exact run of colours the segments use. The two range inputs are stacked on the strip; only their thumbs take
   the pointer, each thumb painted its own hue via --thumb. */
.hue-strip {
  position: relative; height: 22px; margin: 4px 9px 0;
  border-radius: 11px; border: 1px solid var(--line);
  background: linear-gradient(to right, hsl(0,70%,58%), hsl(60,70%,58%), hsl(120,70%,58%), hsl(180,70%,58%),
                                        hsl(240,70%,58%), hsl(300,70%,58%), hsl(359,70%,58%));
}
.hue-strip-dim { position: absolute; top: 0; bottom: 0; background: var(--bg); opacity: 0.78; pointer-events: none; }
#prefs-hue-dim-l { border-radius: 11px 0 0 11px; }
#prefs-hue-dim-r { border-radius: 0 11px 11px 0; }
.hue-strip input[type=range] {
  position: absolute; inset: 0 -9px; width: calc(100% + 18px); height: 100%; margin: 0;
  background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.hue-strip input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.hue-strip input[type=range]::-moz-range-track { background: transparent; }
.hue-strip input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab;
  width: 18px; height: 28px; margin-top: -3px; border-radius: 9px;
  background: var(--thumb, #888); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--dim), 0 1px 4px rgba(0,0,0,0.3);
}
.hue-strip input[type=range]::-moz-range-thumb {
  pointer-events: auto; cursor: grab; width: 14px; height: 24px; border-radius: 9px;
  background: var(--thumb, #888); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--dim), 0 1px 4px rgba(0,0,0,0.3);
}
.hue-strip input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--blue); }

/* Live preview under the strip: the user's own segments, in Studio order, each half inked like the Studio. */
.hue-mock {
  display: flex; flex-direction: column; gap: 4px; margin-top: 12px; filter: none; opacity: 1;
  max-height: 220px; overflow-y: auto;
}
.hue-mock-seg {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 0; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0; flex-shrink: 0;
}
.hue-mock-seg .hm-l, .hue-mock-seg .hm-r { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hue-mock-seg .hm-l { text-align: right; }
.hue-mock-seg .hm-r { text-align: left; }
.hue-mock-seg .hm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }

/* Sex axes: a classic radio list (circles, one choice). */
.su-radios { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
.su-radios .su-chip { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.su-radios .su-chip input[type="radio"] { position: static; opacity: 1; width: 14px; height: 14px; margin: 0; accent-color: var(--theme); }
.su-radios .su-chip span { padding: 0; border: none; background: none; border-radius: 0; color: var(--txt); font-weight: 600; }
.su-radios .su-chip input[type="radio"]:checked + span { background: none; color: var(--theme); }

/* Setup compaction: tighter cards, rows and controls. Owner 2026-10-06 ("massive empty space"): the page is no
   wider than its widest field needs, so the cards no longer stretch across the whole column around half-width
   fields, and the rows are shorter. */
#setup-content { gap: 8px; max-width: 640px; }
#setup-content .su-row { padding: 3px 12px; gap: 4px 12px; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
#setup-content .su-label { padding-top: 0; font-size: 11.5px; }
#setup-content .su-page-title { margin: 0 2px 2px; font-size: 14px; }
#setup-content .su-ctl { gap: 5px; }
#setup-content .su-input, #setup-content .su-save, #setup-content .su-seg-cell, #setup-content .su-seg-cell.fc-cell { min-height: 30px; }
#setup-content .su-input { padding: 5px 10px; }
#setup-content .su-save { padding: 3px 10px; min-height: 26px; border-radius: 6px; font-size: 11px; }   /* E-Vast Save: small (owner 2026-10-06) */
@container (max-width: 460px) { #setup-content .su-row { grid-template-columns: minmax(0, 1fr); } }

/* Motto bottom + Sig: two cells that must be joined before saving (js/14c-setup.js split fields). */
#setup-content .su-seg-split .btn-connect { display: inline-flex; }
#setup-content .su-need-join .btn-connect { animation: su-need-join 0.45s ease-in-out 3; }
@keyframes su-need-join { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 55%, transparent); } }

/* Back to the profile from Setup: the name / @handle at the top. */
#profile-page.pp-in-setup #pp-identity { cursor: pointer; }

/* The I II III IV-VI tabs read bold like the project names. */
body .subtab-btn { font-weight: 600; }
body .subtab-btn.active { font-weight: 700; }

/* Monogram Agronoms: day squares only; the date (palindromic form) shows on hover. */
.mono-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); gap: 3px; justify-content: start; }
.mono-day { width: 12px; height: 12px; border-radius: 3px; background: var(--bg2); border: 1px solid var(--line); box-sizing: border-box; }
.mono-day.d1 { background: color-mix(in srgb, var(--theme) 35%, transparent); border-color: transparent; }
.mono-day.d2 { background: color-mix(in srgb, var(--theme) 65%, transparent); border-color: transparent; }
.mono-day.d3 { background: var(--theme); border-color: transparent; }
.mono-day.today { outline: 2px solid var(--theme); outline-offset: 1px; }
.mono-day.pad { visibility: hidden; }
.mono-tip { min-height: 18px; margin-top: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--dim); }
/* No signature -> no preview box at all (owner 2026-10-04). Thinner inner frame for the Setup segments (compaction). */
#setup-content .sig-preview:empty { display: none; }
#setup-content .su-seg-cell.fc-cell { padding: 2px 8px; }
/* Your own post/reply: reaction chips show counts only, they are not buttons you can press (owner 2026-10-06). */
.fp-reaction.fp-reaction-own, .fp-rxmore-item.fp-reaction-own { cursor: default; }
.fp-reaction.fp-reaction-own:hover { transform: none; filter: none; }

/* Motto bottom + Sig are split Segments with the join button showing: Studio proportions (css/14-feed.css .fc-cell),
   so the middle buttons fit, and the reverse dot back at its Studio spot under the join button (06-merge-insert.css
   moves it to the column centre for the fields WITHOUT a join button, which cut it off here, owner 2026-10-06). */
#setup-content .su-seg-cell.su-seg-split.fc-cell { min-height: 46px; padding: 9px 14px; }
#setup-content .su-seg-split .cell-center-cluster > .cell-center-dot .rdot { top: 9px; }

/* Sig userbar (owner 2026-10-06): the bar is pixel art, so it is never smoothed when shown; the picture placer shows
   the bar twice its size (drag to move the picture), with fill / fit / zoom / done under it. */
.fp-sig-image { image-rendering: pixelated; }
#setup-content .sig-maker .su-file.active { outline: 2px solid var(--theme); outline-offset: 2px; }
#setup-content .sig-crop { display: flex; flex-direction: column; gap: 4px; }
#setup-content .sig-crop[hidden] { display: none; }
#setup-content .sig-crop canvas { width: 100%; max-width: 525px; aspect-ratio: 350 / 20; image-rendering: pixelated;
  border-radius: 3px; cursor: grab; touch-action: none; }
#setup-content .sig-crop canvas:active { cursor: grabbing; }
#setup-content .sig-crop .su-icon-btn.active { color: var(--theme); border-color: var(--theme); }
#setup-content .sig-crop-zoom { flex: 1; min-width: 80px; max-width: 220px; accent-color: var(--theme); }
#setup-content .sig-preview { padding: 6px 10px; min-height: 0; }

/* Names share quoted-name ink in both modes (owner 2026-10-06). */
body :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-display-name { color: var(--txt); font-weight: 700; text-shadow: none; background: none; }
body :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-display-name:hover { color: var(--author, var(--theme)); }
body.dark-mode :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-display-name:hover { color: var(--author-dark, var(--theme)); }