/* bside-ui.css — shared nav bell, GOLD badge variants, mobile nav fix.
   Loaded after each page's inline <style> so it wins on equal specificity. */

/* ---------- Notifications bell: quiet, matches nav .btn (1px ink line, 13px scale) ---------- */
.notif-bell{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font-size:0; padding:0; transition:background 120ms, color 120ms;
}
.notif-bell svg{ width:16px; height:16px; display:block; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.notif-bell:hover{ background:var(--ink); color:var(--cream); }
.notif-badge{
  top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px;
  background:var(--ruby); color:#fff; font-size:10px; font-weight:700;
  box-shadow:0 0 0 2px var(--cream);
}
/* badge only when count > 0 (JS sets display:flex; this guards empty / "0") */
.notif-badge:empty{ display:none !important; }

/* ---------- GOLD badge: three switchable treatments ----------
   Markup: <span class="gold-badge" role="img" aria-label="Gold member">…3 variants…</span>
   Switch site-wide: <html data-gold="a|b|c">  (default b). Per-badge: data-gold on the span. */
.gold-badge{
  --g-ink:#8A6A2E; --g-hi:#C9A45C; --g-deep:#5E4718;
  display:inline-flex; align-items:center; vertical-align:middle; line-height:1;
  background:none; box-shadow:none; padding:0; border-radius:0; color:var(--g-ink);
  font-size:0; letter-spacing:0; margin-left:.35em; position:relative; top:-.08em;
}
.gold-badge::before{ content:none !important; }
.gold-badge > .gv{ display:none; }
html:not([data-gold]) .gold-badge:not([data-gold]) > .gv-a,
html[data-gold="a"] .gold-badge:not([data-gold]) > .gv-a,
html[data-gold="b"] .gold-badge:not([data-gold]) > .gv-b,
html[data-gold="c"] .gold-badge:not([data-gold]) > .gv-c,
.gold-badge[data-gold="a"] > .gv-a,
.gold-badge[data-gold="b"] > .gv-b,
.gold-badge[data-gold="c"] > .gv-c{ display:inline-flex; }

/* Brushed-foil texture: fine linear grain, no gloss */
.gold-badge .foil{
  background-color:#B8964F;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,240,200,.10) 0 1px, rgba(60,40,10,.08) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, #C6A660 0%, #B08C47 100%);
}

/* (A) Engraved foil seal — round, B monogram, double hairline ring */
.gold-badge .gv-a{ width:22px; height:22px; }
.gold-badge .gv-a svg{ width:100%; height:100%; display:block; }

/* (B) Members' wordmark — spaced serif small caps, hairline rules, no fill */
.gold-badge .gv-b{
  align-items:center; gap:6px;
  font-family:"Fraunces", "Cormorant Garamond", Georgia, serif; font-style:normal; font-weight:500;
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--g-ink); padding:4px 4px 4px 9px; /* right pad offsets trailing tracking */
  border-top:1px solid rgba(138,106,46,.55); border-bottom:1px solid rgba(138,106,46,.55);
  font-variant-caps:all-small-caps;
}
.gold-badge .gv-b::before{ content:""; width:4px; height:4px; transform:rotate(45deg); background:var(--g-ink); opacity:.8; margin-right:2px; }

/* (C) Vinyl — engraved grooves, brushed gold label, B monogram */
.gold-badge .gv-c{ width:22px; height:22px; }
.gold-badge .gv-c svg{ width:100%; height:100%; display:block; }

/* Sizes */
.ph-name .gold-badge .gv-a, .ph-name .gold-badge .gv-c{ width:28px; height:28px; }
.ph-name .gold-badge .gv-b{ font-size:11px; }
.topbar .gold-badge{ margin-left:0; top:0; }

/* Gold avatar ring: single thin muted hairline instead of loud double ring */
.profile-root.is-gold .ph-avatar{ box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 0 0 2.5px #B08C47 !important; }

/* ---------- Mobile nav: no horizontal overflow at 320–430px ---------- */
html, body{ overflow-x:clip; }
.topbar{ flex-wrap:wrap; gap:10px; }
.topbar .actions{ flex-wrap:wrap; min-width:0; }
@media (max-width:640px){
  .topbar{ padding:12px 16px; }
  .topbar .actions{ width:100%; gap:6px; justify-content:flex-start; }
  .topbar .actions .btn{ padding:7px 11px; font-size:12px; }
  .topbar .notif-bell{ width:32px; height:32px; }
  .topbar .alpha-pill{ display:none; }
  .notif-panel{ left:12px; right:12px; width:auto; top:110px; }
}

/* ---------- Photo albums empty state: breathing room before next heading ---------- */
.profile-root #albums-wrap .album-photo-empty{ display:block; padding:4px 0 0; margin-bottom:calc(32px * var(--bs-spacing, 1)); }

/* ---------- Banner photo ---------- */
.profile-root .ph-banner.has-photo{ position:relative; overflow:hidden; background:#222; background-image:none; }
.profile-root .ph-banner .ph-banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.profile-root .ph-banner .ph-banner-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.38) 100%); }
/* Editor focal-point control */
.banner-focus{ position:relative; width:100%; aspect-ratio:4/1; border-radius:10px; overflow:hidden; background:#ddd; cursor:crosshair; touch-action:none; margin-top:10px; }
.banner-focus img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; user-select:none; }
.banner-focus .dot{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); background:rgba(255,255,255,.15); pointer-events:none; }
.banner-focus-hint{ font-size:12px; color:var(--mute,#6B6761); margin-top:6px; }
.profile-root .ph-banner.has-photo ~ * .ph-avatar, .profile-root .ph-avatar{ position:relative; z-index:2; }

/* ---------- Profile fonts (data-font set by js/fonts.js; default Inter) ---------- */
.profile-root[data-font]{ --bs-headline-style:normal; --bs-headline-weight:700; }
.profile-root[data-font="inter"]          { --bs-body-font:"Inter",system-ui,sans-serif;            --bs-headline-font:"Inter",system-ui,sans-serif; }
.profile-root[data-font="dm-sans"]        { --bs-body-font:"DM Sans","Inter",system-ui,sans-serif;   --bs-headline-font:"DM Sans","Inter",system-ui,sans-serif; }
.profile-root[data-font="work-sans"]      { --bs-body-font:"Work Sans","Inter",system-ui,sans-serif; --bs-headline-font:"Work Sans","Inter",system-ui,sans-serif; }
.profile-root[data-font="plex-sans"]      { --bs-body-font:"IBM Plex Sans","Inter",system-ui,sans-serif; --bs-headline-font:"IBM Plex Sans","Inter",system-ui,sans-serif; }
.profile-root[data-font="space-grotesk"]  { --bs-body-font:"Space Grotesk","Inter",system-ui,sans-serif; --bs-headline-font:"Space Grotesk","Inter",system-ui,sans-serif; }
.profile-root[data-font="source-serif"]   { --bs-body-font:"Source Serif 4",Georgia,serif;           --bs-headline-font:"Source Serif 4",Georgia,serif; --bs-headline-weight:600; }
.profile-root[data-font="playfair"]       { --bs-body-font:"Inter",system-ui,sans-serif;            --bs-headline-font:"Playfair Display",Georgia,serif; }
.profile-root[data-font="jetbrains-mono"] { --bs-body-font:"JetBrains Mono",ui-monospace,monospace; --bs-headline-font:"JetBrains Mono",ui-monospace,monospace; --bs-headline-weight:700; }
/* Templates hardcode italic/800 on headline-font elements; readable fonts render upright. */
.profile-root[data-font] [class^="ph-"], .profile-root[data-font] [class*=" ph-"],
.profile-root[data-font] [class^="gb-"], .profile-root[data-font] [class^="album-"]{ font-style:normal; }
.profile-root[data-font] .ph-name{ font-weight:var(--bs-headline-weight); letter-spacing:-0.02em; }
.profile-root[data-font] .ph-bio{ font-family:var(--bs-body-font); font-weight:400; }
/* Body-level text that templates pinned to Inter follows the chosen body font */
.profile-root[data-font] :is(p, .gb-body, .gb-input, textarea, input, .album-name, .album-count, .ph-section-label){ font-family:var(--bs-body-font); }
.profile-root[data-font] em, .profile-root[data-font] i{ font-style:italic; }
/* Editor font picker: each name in its own face */
.font-knob-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.font-knob-row .knob{ justify-content:flex-start; text-align:left; font-size:15px; padding:10px 12px; border-radius:10px; line-height:1.15; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.font-knob-row .knob small{ font-family:"Inter",sans-serif; font-size:10.5px; opacity:.85; letter-spacing:.02em; }

/* ---------- Gold badge tooltip ---------- */
.gold-badge{ cursor:default; outline:none; -webkit-touch-callout:none; user-select:none; }
.gold-badge:focus-visible{ box-shadow:0 0 0 2px var(--cream,#F5EFE1), 0 0 0 3.5px #A8873F; border-radius:999px; }
.gold-badge::after{
  content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 10px); transform:translate(-50%,-2px);
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 140ms ease, transform 140ms ease;
  background:#1A1918; color:#F3E9D2; border-top:1px solid #A8873F;
  font:500 10.5px/1 "Inter",system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; font-style:normal;
  padding:8px 11px 7px; border-radius:4px; box-shadow:0 6px 18px rgba(26,25,24,.22); z-index:60;
}
.gold-badge:hover::after, .gold-badge:focus-visible::after, .gold-badge.tip-open::after{ opacity:1; transform:translate(-50%,0); }
.topbar .gold-badge::after{ left:auto; right:0; transform:translate(0,-2px); }
.topbar .gold-badge:hover::after, .topbar .gold-badge:focus-visible::after, .topbar .gold-badge.tip-open::after{ transform:translate(0,0); }
.gold-badge.tip-end::after{ left:auto; right:-4px; transform:translate(0,-2px); }
.gold-badge.tip-start::after{ left:-4px; right:auto; transform:translate(0,-2px); }
.gold-badge.tip-end:is(:hover,:focus-visible,.tip-open)::after, .gold-badge.tip-start:is(:hover,:focus-visible,.tip-open)::after{ transform:translate(0,0); }
.gold-badge.tip-light::after{ background:#F7F1E3; color:#1A1918; border-top-color:#A8873F; box-shadow:0 6px 18px rgba(0,0,0,.35); }

/* ---- Viewer font on app pages (feed / discover / messages). ONE setting: the viewer's own profiles.knob_font.
   Default Inter. Brand display type (logo, page titles, avatar initials) stays Fraunces. ---- */
:root{ --bs-app-font:"Inter",system-ui,sans-serif; --bs-app-head:var(--bs-app-font); }
html[data-app-font="dm-sans"]        { --bs-app-font:"DM Sans","Inter",system-ui,sans-serif; }
html[data-app-font="work-sans"]      { --bs-app-font:"Work Sans","Inter",system-ui,sans-serif; }
html[data-app-font="plex-sans"]      { --bs-app-font:"IBM Plex Sans","Inter",system-ui,sans-serif; }
html[data-app-font="space-grotesk"]  { --bs-app-font:"Space Grotesk","Inter",system-ui,sans-serif; }
html[data-app-font="source-serif"]   { --bs-app-font:"Source Serif 4",Georgia,serif; }
html[data-app-font="jetbrains-mono"] { --bs-app-font:"JetBrains Mono",ui-monospace,monospace; }
html[data-app-font="playfair"]       { --bs-app-head:"Playfair Display",Georgia,serif; } /* headings only; body stays Inter */
html[data-app-font] body{ font-family:var(--bs-app-font); }
html[data-app-font] body :is(input, textarea, button, select){ font-family:var(--bs-app-font); }
:is(.post-body, textarea#composer-text, textarea#composer-text::placeholder, .post-comment-body, .comment-input,
    .board-post-text, .board-post-body p){ font-family:var(--bs-app-font) !important; font-style:normal !important; }
.post-body{ font-weight:400 !important; }
:is(.post-name, .post-comment-body b, .member-name, .group-name-row .group-name, .board-post-name){
  font-family:var(--bs-app-head) !important; font-style:normal !important; font-weight:650 !important; letter-spacing:-0.005em; }

/* Profile font reaches every section (About, guestbook, posts, Top 8, comments), name keeps the headline face. */
.profile-root[data-font] :is(p, li, span, a, div, small, b, strong, label, button, textarea, input, td, th):not(.ph-name, .ph-name *, .gold-badge, .gold-badge *){ font-family:var(--bs-body-font); }
.profile-root[data-font] :is(h1, h2, h3, h4, .ph-section-label, .top8-name, .post-name, .gb-name){ font-family:var(--bs-headline-font); }

/* Post editing */
.post-edited{ color:var(--bs-mute, #6B6761); font-size:inherit; }
.post-edit-form{ margin:2px 0 12px; }
.post-edit-form textarea{ width:100%; box-sizing:border-box; min-height:84px; resize:vertical; padding:10px 12px;
  border:1px solid var(--bs-line, rgba(26,25,24,.14)); border-radius:10px; background:var(--bs-card, #fff); color:inherit;
  font:15px/1.5 var(--bs-app-font); }
.post-edit-form textarea:focus{ outline:2px solid rgba(176,141,74,.45); outline-offset:1px; }
.post-edit-row{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; }
.post-edit-count{ color:var(--bs-mute, #6B6761); }
.post-edit-err{ color:#C73E3A; flex:1; }
.post-edit-row button{ border-radius:999px; padding:6px 14px; font:600 12px/1 var(--bs-app-font); cursor:pointer;
  border:1px solid var(--bs-line, rgba(26,25,24,.2)); background:transparent; color:inherit; }
.post-edit-row .post-edit-cancel{ margin-left:auto; }
.post-edit-row .post-edit-save{ background:#1A1918; color:#fff; border-color:#1A1918; }
.post-edit-row .post-edit-save:disabled{ opacity:.5; }

/* ---- Themed form fields (WCAG AA). Every theme scope (.post / .profile-root) derives its field colors from
   its own palette: field = theme page bg, ink = theme fg, placeholder = fg mixed toward bg (kept >= 4.5:1). ---- */
:root{
  --field-bg:#FFFFFF; --field-ink:#1A1918; --field-placeholder:#625E58; --field-line:rgba(26,25,24,0.22); --field-ring:#9A7838;
}
.post, .profile-root{
  --field-bg:var(--bs-bg, #FFFFFF);
  --field-ink:var(--bs-fg, #1A1918);
  --field-placeholder:var(--bs-mute, #625E58);
  --field-line:var(--bs-line, rgba(26,25,24,0.22));
  --field-ring:var(--bs-accent, #9A7838);
}
:is(.post, .profile-root) :is(textarea, input[type="text"], input[type="email"], input:not([type])),
.post-edit-form textarea, .comment-input, .profile-root .gb-form textarea{
  background:var(--field-bg) !important; color:var(--field-ink) !important;
  border:1px solid var(--field-line) !important; caret-color:var(--field-ink);
}
:is(.post, .profile-root) :is(textarea, input)::placeholder, .comment-input::placeholder{ color:var(--field-placeholder) !important; opacity:1; }
.post-edit-count{ color:var(--field-placeholder) !important; }
.post-edit-row button{ color:var(--field-ink) !important; border-color:var(--field-line) !important; }
.post-edit-row .post-edit-save{ background:var(--field-ink) !important; color:var(--field-bg) !important; border-color:var(--field-ink) !important; }
/* Visible focus ring everywhere (keyboard + pointer for text fields) */
:is(textarea, input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], input:not([type])):focus-visible,
:is(textarea, input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], input:not([type])):focus{
  outline:2px solid var(--field-ring) !important; outline-offset:2px;
}
/* Page-level fields (composer, messages, GIF search, editor) */
textarea#composer-text{ color:var(--field-ink); }
textarea#composer-text::placeholder, #gif-q::placeholder, .dm-input::placeholder, .editor-panel :is(input, textarea)::placeholder{ color:var(--field-placeholder) !important; opacity:1; }
textarea#composer-text:focus{ outline-offset:4px; border-radius:6px; }
/* Per-theme placeholder tuning where the theme's mute tone is under 4.5:1 on its field */
:is(.post, .profile-root).t-concert { --field-placeholder:#4A3A1E; }
:is(.post, .profile-root).t-garden  { --field-placeholder:#55563E; }
:is(.post, .profile-root).t-polaroid{ --field-placeholder:#6A4E44; }
:is(.post, .profile-root).t-library { --field-placeholder:#B8AE9A; }

/* ---- Real Top 8 editor ---- */
.t8e-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.t8e-slot{ display:flex; align-items:center; gap:8px; min-height:48px; padding:6px 8px; border:1px solid var(--line, rgba(26,25,24,.15)); border-radius:8px; background:#fff; position:relative; }
.t8e-slot.over{ border-color:#9A7838; box-shadow:0 0 0 2px rgba(154,120,56,.25); }
.t8e-slot.dragging{ opacity:.5; }
.t8e-num{ width:16px; font-size:11px; color:#625E58; font-variant-numeric:tabular-nums; text-align:right; }
.t8e-handle{ cursor:grab; color:#8A857D; letter-spacing:-3px; padding:4px; user-select:none; }
.t8e-handle:focus-visible, .t8e-btns button:focus-visible{ outline:2px solid #9A7838; outline-offset:2px; }
.t8e-av{ width:32px; height:32px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }
.t8e-who{ display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.2; }
.t8e-who b{ font-size:13px; font-weight:600; color:#1A1918; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t8e-who small{ font-size:11px; color:#625E58; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t8e-btns{ display:flex; gap:4px; }
.t8e-btns button{ width:32px; height:32px; border:1px solid rgba(26,25,24,.15); border-radius:6px; background:#fff; color:#1A1918; cursor:pointer; font-size:13px; }
.t8e-btns button:disabled{ opacity:.3; cursor:default; }
.t8e-rm:hover{ color:#A33; border-color:#A33; }
.t8e-search{ flex:1; position:relative; }
.t8e-search input{ width:100%; box-sizing:border-box; font:13px Inter, sans-serif; padding:8px 10px; border:1px solid rgba(26,25,24,.22); border-radius:6px; background:#fff; color:#1A1918; }
.t8e-search input::placeholder{ color:#625E58; }
.t8e-search input:focus{ outline:2px solid #9A7838; outline-offset:1px; }
.t8e-menu{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); list-style:none; margin:0; padding:4px; background:#fff; border:1px solid rgba(26,25,24,.15); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.t8e-menu li{ display:flex; align-items:center; gap:8px; padding:8px; min-height:44px; box-sizing:border-box; border-radius:6px; cursor:pointer; }
.t8e-menu li.on, .t8e-menu li[data-k]:hover{ background:#F5EFE3; }
.t8e-menu .t8e-none{ color:#625E58; font-size:12px; cursor:default; }
.t8e-status{ font-size:11px; color:#625E58; min-height:14px; margin-top:6px; }
@media (hover:hover) and (pointer:fine){ .t8e-btns .t8e-up, .t8e-btns .t8e-down{ display:none; } }
@media not ((hover:hover) and (pointer:fine)){ .t8e-handle{ display:none; } }

/* =====================================================================
   B-side button / pill system (v2). Pages opt in with <body class="ui2">.
   One radius (pill), two heights: regular 40px, small 34px. 13px/12px type.
   Variants: primary (filled ink), secondary (ink outline, default), ghost, danger.
   New code: <a class="ui-btn primary|secondary|ghost|danger [sm]">.
   Legacy classes (.btn .p-btn .g-btn .act-btn .bs-friend button .new-msg-btn .post-btn .share-btn) get the same geometry.
   ===================================================================== */
:root{ --ui-h:40px; --ui-h-sm:34px; --ui-r:999px; --ui-fs:13px; --ui-fs-sm:12px; --ui-px:16px; --ui-px-sm:12px; }
.ui2 .ui-btn, .ui2 .btn, .ui2 .p-btn, .ui2 .g-btn, .ui2 .act-btn, .ui2 .bs-friend button, .ui2 .new-msg-btn, .ui2 .post-btn, .ui2 .share-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box;
  min-height:var(--ui-h); height:auto; padding-top:0; padding-bottom:0; padding-left:var(--ui-px); padding-right:var(--ui-px);
  border-radius:var(--ui-r); font-family:"Inter",system-ui,sans-serif; font-size:var(--ui-fs); font-weight:600; line-height:1.2;
  white-space:nowrap; text-decoration:none; vertical-align:middle; aspect-ratio:auto; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.ui2 .ui-btn.sm, .ui2 .g-btn.sm, .ui2 .btn.sm, .ui2 .topbar .actions .btn, .ui2 nav .actions .btn{
  min-height:var(--ui-h-sm); padding-left:var(--ui-px-sm); padding-right:var(--ui-px-sm); font-size:var(--ui-fs-sm);
}
.ui2 .topbar .actions .theme-btn, .ui2 .topbar .actions .notif-bell, .ui2 nav .actions .theme-btn, .ui2 nav .actions .notif-bell{ width:var(--ui-h-sm); height:var(--ui-h-sm); min-height:0; padding:0; }
.ui2 .ui-btn{ border:1px solid var(--ink); background:transparent; color:var(--ink); }
.ui2 .ui-btn.primary{ background:var(--ink); color:var(--cream); }
.ui2 .ui-btn.ghost{ border-color:transparent; }
.ui2 .ui-btn.danger{ background:#B3261E; border-color:#B3261E; color:#fff; }
html[data-theme="dark"] .ui2 .ui-btn.primary{ color:#141312; }
html[data-theme="dark"] .ui2 .ui-btn.danger{ background:#F2B8B5; border-color:#F2B8B5; color:#3B0A08; }
.ui2 .ui-btn:focus-visible, .ui2 .btn:focus-visible, .ui2 .p-btn:focus-visible{ outline:3px solid #F2C14E; outline-offset:2px; }
/* Profile header: Message / ⋯ / friend button share one height */
.ui2 .profile-root .ph-friend-actions{ align-items:center; }
.ui2 .profile-root .ph-friend-actions .p-btn, .ui2 .profile-root .ph-friend-actions .bs-friend button{ min-height:var(--ui-h); font-size:var(--ui-fs); }
.ui2 .profile-root .more-btn{ min-width:var(--ui-h); padding-left:12px; padding-right:12px; }