/*
  Design direction: corrugated sheet metal, stenciled crate lettering and
  weathered steel, like a pipe yard — not a generic dark SaaS dashboard.
  Palette leans on a burnt-orange accent and weathered brass against warm charcoal,
  panels are named "crate-panel" and carry a stenciled strap accent rather
  than a rounded-card-with-shadow treatment.
*/

/*
  Color primitives are intentionally few: :root only sets six base colors,
  admin-editable from the control panel (see /api/site/theme). Everything
  else below (raised panels, hover states, hairline borders, muted text) is
  derived from those six via color-mix() so the palette stays coherent no
  matter what the admin picks — nobody has to hand-tune a dozen shades to
  change the site's look. JS overrides the --*-base custom properties
  (site-wide, or per-user via --user-accent/--user-bg-panel) rather than
  touching any of the derived ones directly.
*/

:root {
  --bg-base: #17140f;
  --bg-panel: #221d16;
  --accent: #b6491f;
  --brass: #c9a227;
  --text-main: #eee7d8;
  --danger: #9a3b32;

  /* Set per page by app/themes.py; these are the Forge defaults. */
  --on-accent: #ffffff;
  --on-danger: #ffffff;

  /* Derived — don't set these directly, change a primitive above instead.
     Mixed toward the text colour (not white) so light themes work too. */
  --bg-panel-raised: color-mix(in srgb, var(--bg-panel) 92%, var(--text-main) 8%);
  --border-hairline: color-mix(in srgb, var(--bg-panel) 80%, var(--text-main) 20%);
  --accent-bright: color-mix(in srgb, var(--accent) 75%, white 25%);
  --text-muted: color-mix(in srgb, var(--text-main) 66%, var(--bg-panel) 34%);

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 40px),
    var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
}

.hidden { display: none !important; }

button, input, select {
  font-family: inherit;
  color: inherit;
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 14px 28px;
  border-bottom: 2px solid var(--border-hairline);
  background: var(--bg-panel);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* ---------- Crate panel (shared card style) ---------- */

.crate-panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-hairline);
  padding: 22px 22px 20px;
}

.crate-panel-strap {
  position: absolute;
  top: 0;
  left: 24px;
  width: 34px;
  height: 6px;
  background: var(--accent);
}

/* ---------- Guest / auth view ---------- */

.guest-view {
  min-height: calc(100vh - 66px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 20px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-hairline);
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 4px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.auth-tab.active {
  color: var(--accent-bright);
  border-bottom-color: var(--accent);
}

select:focus,
button:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 1px;
}

.form-error {
  color: var(--danger);
  font-size: 12.5px;
  margin: -6px 0 0;
  min-height: 1em;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.btn-block { display: block; width: 100%; margin-top: 8px; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.1); }

.btn-ghost { background: none; border-color: var(--border-hairline); color: var(--text-muted); }
.btn-ghost:hover { color: var(--text-main); border-color: var(--text-muted); }

/* ---------- Dashboard layout ---------- */

.dashboard {
  padding: 24px;
}

.main-panel { flex: 1; min-width: 0; }

.muted-note { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
  .dashboard { flex-direction: column; }
  .sidebar { width: 100%; }
}

.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-hairline);
  padding: 2px 8px;
  font-size: 10.5px;
  border-radius: 2px;
  color: var(--text-muted);
}

.admin-tab {
  background: none;
  border: none;
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  cursor: pointer;
}

.admin-tab.active { background: var(--accent); color: var(--bg-base); }

.header-account { margin-left: auto; }

/* ---------- Sidebar / main blocks ---------- */

.block-widget { margin-bottom: 16px; }
.block-widget h3 {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* ---------- Rendered BBCode content ---------- */

.bbcode-glow {
  text-shadow: 0 0 6px var(--glow-color), 0 0 14px var(--glow-color);
}

.bbcode-marquee {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  vertical-align: bottom;
}
.bbcode-marquee-inner {
  display: inline-block;
  padding-left: 100%;
  animation: bbcode-marquee-scroll 10s linear infinite;
}
@keyframes bbcode-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.bbcode-quote {
  border-left: 3px solid var(--accent);
  background: var(--bg-panel-raised);
  padding: 10px 14px;
  margin: 8px 0;
}
.bbcode-quote-who { font-family: var(--font-display); font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }

.bbcode-code {
  background: var(--bg-base);
  border: 1px solid var(--border-hairline);
  padding: 10px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin: 8px 0;
}

.bbcode-spoiler { border: 1px solid var(--border-hairline); padding: 6px 10px; margin: 8px 0; }
.bbcode-spoiler summary { cursor: pointer; font-family: var(--font-display); font-size: 12.5px; color: var(--brass); }

.bbcode-img { max-width: 100%; height: auto; display: block; margin: 8px 0; }

.bbcode-video { position: relative; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; margin: 8px 0; }
.bbcode-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.forum-composer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-hairline); }
.forum-composer textarea {
  width: 100%;
  min-height: 100px;
  background: var(--bg-base);
  border: 1px solid var(--border-hairline);
  color: var(--text-main);
  font-size: 13px;
  padding: 10px;
  resize: vertical;
  margin-bottom: 8px;
}
.forum-composer input[type="text"] {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-hairline);
  color: var(--text-main);
  font-size: 14px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.wall-post {
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-hairline);
  padding: 12px;
  margin-bottom: 12px;
  text-align: left;
}

.wall-post-body { font-size: 13.5px; line-height: 1.55; margin-bottom: 8px; color: var(--text-main); }

/* Cap heading sizes inside wall posts and forum content so BBCode h1/h2 don't blow up */
.wall-post-body h1, .wall-post-body h2, .wall-post-body h3,
.forum-post-body h1, .forum-post-body h2, .forum-post-body h3 {
  font-size: 1.1em;
  font-family: var(--font-display);
  color: var(--text-main);
  margin: 4px 0;
  font-weight: 600;
}

.tx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tx-table th, .tx-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: middle;
}
.tx-table th { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.tx-table img { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: 8px; }

/* ==========================================================================
   UI REFRESH — cards, block system, admin overhaul
   ========================================================================== */

/* ==========================================================================
   PROFILE PAGE — hero, tabs, two-column layout, cards, settings
   ========================================================================== */

.profile-card-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-setting-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}

.profile-input {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-hairline);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 10px;
  box-sizing: border-box;
}

.profile-color-swatch {
  width: 44px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-base);
  cursor: pointer;
}

.btn-xs {
  font-size: 11px;
  padding: 3px 8px;
}

.inv-pag-controls { display: flex; align-items: center; gap: 10px; }
.inv-pag-label { font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.inv-per-page-select { background: var(--bg-base); border: 1px solid var(--border-hairline); color: var(--text-main); padding: 5px 8px; font-size: 12px; margin-left: auto; }

/* ---------- Sidebar redesign ---------- */

.sidebar { display: flex; flex-direction: column; gap: 0; padding: 0 !important; }

.sidebar-identity {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border-hairline);
}

.sidebar-avatar {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  object-fit: cover;
  border: 2px solid var(--accent);
}

.sidebar-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: var(--bg-base);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--accent);
}

.sidebar-username {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--text-main);
}

.sidebar-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.sidebar-section-label {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ---------- Unified site nav (replaces header-nav-static + #header-nav) ---------- */

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 1;
  overflow-x: auto;
  padding: 0 8px;
  gap: 0;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav-link {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  line-height: var(--header-height, 56px);
}
.site-nav-link:hover { color: var(--text-main); }
.site-nav-link.nav-active { color: var(--accent-bright); border-bottom-color: var(--accent); }

/* ==========================================================================
   EMOJI PICKER
   ========================================================================== */

/* ==========================================================================
   UI POLISH PASS — color fixes, compact settings, dropdown contrast
   ========================================================================== */

/* Brand name follows color scheme — was inheriting blue link color */
.brand-name { color: var(--accent); }
.brand-name:hover { color: var(--accent-bright); }
a.brand:hover .brand-name { color: var(--accent-bright); }

/* ---------- Fix white-on-white dropdowns and form elements ---------- */
/* When panel_color is light, inputs become unreadable without explicit colors */
select,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
textarea {
  background-color: var(--bg-base) !important;
  color: var(--text-main) !important;
  border-color: var(--border-hairline) !important;
}

select option {
  background-color: var(--bg-base);
  color: var(--text-main);
}

/* Admin panel selects */
.profile-input,
.inv-per-page-select,
.inv-per-page-select option {
  background: var(--bg-base) !important;
  color: var(--text-main) !important;
}

.profile-color-swatch {
  width: 36px;
  height: 28px;
  padding: 1px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-base);
  cursor: pointer;
  flex-shrink: 0;
}

/* Avatar wrap with notification badge */
.sidebar-avatar-wrap {
  position: relative;
  display: inline-block;
}

/* ==========================================================================
   SIDEBAR PROFILE BLOCK — full treatment
   ========================================================================== */

.sidebar-identity {
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border-hairline);
  text-align: center;
}

/* Avatar with online dot positioned correctly */
.sidebar-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 4px;
}

.sidebar-avatar,
.sidebar-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  border: 2px solid var(--accent);
  display: flex;
}

/* Never let CSS override HTML hidden attribute */
[hidden] { display: none !important; }

.sidebar-avatar-placeholder {
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

/* Online dot — bottom-right of avatar */
.sidebar-online-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 11px;
  height: 11px;
  background: #4caf50;
  border-radius: 50%;
  border: 2px solid var(--bg-panel);
  display: none;  /* shown via JS when online */
}

.sidebar-username {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

.sidebar-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

/* Quick stats row */
.sidebar-quick-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
  justify-content: center;
}
.sidebar-quick-stats span { white-space: nowrap; }

/* ==========================================================================
   PAGE HERO — wallpaper band, sits between header and app content
   ========================================================================== */

/* App sits below the hero */
#app {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 56px);
}

/* Admin panel */
.admin-tabs-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-hairline);
  margin-bottom: 0;
}
.admin-tab {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 10px 18px;
  background: var(--bg-panel);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-tab:hover { color: var(--text-main); }
.admin-tab.active { color: var(--accent-bright); border-bottom-color: var(--accent); }

#admin-content {
  border-top: none;
  min-height: 300px;
}

.block-panel {
  margin-bottom: 0;
}

.block-content {
  padding: 10px 14px 14px;
  font-size: 13px;
  line-height: 1.5;
}

/* ==========================================================================
   PORTAL LAYOUT — three columns, phpNuke style
   Left col: player block + left blocks
   Center: page content
   Right col: right blocks (when configured)
   ========================================================================== */

#app {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-height: calc(100vh - 56px);
}

.col-left {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 8px 16px 12px;
  /* Not a scroll box: nothing in it is ever cut off. It stays in view while
     the page scrolls; one taller than the window scrolls along with the page
     until its last block shows (static/columns.js sets --col-top). */
  position: sticky;
  top: var(--col-top, 8px);
  z-index: 3;                       /* its hover boxes may reach over the centre */
  align-self: flex-start;
}

.col-center {
  flex: 1;
  min-width: 0;
  padding: 16px 12px;
}

.col-right {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px 16px 8px;
  position: sticky;                 /* like the left column: see there */
  top: var(--col-top, 8px);
  z-index: 3;
  align-self: flex-start;
}

.block-panel { margin-bottom: 0; }
.block-content { padding: 10px 14px 14px; font-size: 13px; line-height: 1.5; }

/* ---------- Admin cog on the identity block ----------
   Replaces the full-width "Admin panel" button that used to occupy its own
   panel in the left column. */
.sidebar-admin-cog {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  margin-left: 6px;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}
.sidebar-admin-cog:hover { opacity: 1; color: var(--accent-bright); }

/* ---------- Per-user block layout cog ----------
   <details>-based so it needs no JS and survives HTMX swaps. */
.block-panel { position: relative; }

.block-cog { position: absolute; top: 4px; right: 6px; z-index: 5; }
.block-cog > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0;
  padding: 2px 4px;
  transition: opacity 0.15s, color 0.15s;
}
.block-cog > summary::-webkit-details-marker { display: none; }
.block-panel:hover .block-cog > summary,
.block-cog[open] > summary { opacity: 0.7; }
.block-cog > summary:hover { opacity: 1; color: var(--accent-bright); }

.block-cog-menu {
  position: absolute;
  right: 0;
  top: 20px;
  min-width: 190px;
  background: var(--bg-base);
  border: 1px solid var(--border-hairline);
  padding: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.block-cog-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.block-cog-moved { color: var(--accent-bright); margin-left: 4px; }
.block-cog-row { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 4px; }
.block-cog-note { font-size: 10px; color: var(--text-muted); line-height: 1.4; margin-top: 4px; }

.hidden-blocks-panel > summary { list-style: none; padding: 10px 14px; }
.hidden-blocks-panel > summary::-webkit-details-marker { display: none; }

/* ---------- Image library picker ---------- */
.image-picker-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}
.image-grid-item,
.image-grid-none {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  border: 1px solid var(--border-hairline);
  padding: 4px;
  cursor: pointer;
  min-height: 56px;
  transition: border-color 0.15s;
}
.image-grid-item:hover,
.image-grid-none:hover { border-color: var(--accent); }
.image-grid-item img { max-width: 100%; max-height: 52px; object-fit: contain; }
.image-grid-none { font-size: 11px; color: var(--text-muted); }

/* ---------- Full-page wallpaper ----------
   Replaces the 120px hero band. The image is fixed so it does not scroll
   away on long pages, and the tint sits between the image and the content
   so the user can colour-match the wallpaper to their panel scheme. */
.page-wallpaper,
.page-wallpaper-tint {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.page-wallpaper {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.page-wallpaper-tint { z-index: -1; }

/* With a wallpaper behind everything, body's own texture would show
   through the tint and muddy it. */
body:has(.page-wallpaper) { background: none; }

/* Panels must stay legible over an arbitrary photo, so they keep their own
   solid background rather than inheriting transparency. */
body:has(.page-wallpaper) .crate-panel,
body:has(.page-wallpaper) .main-panel {
  background-color: var(--bg-panel);
}

/* Mobile browsers handle background-attachment: fixed badly — it causes
   jank and sometimes a blank layer while scrolling. */
@media (max-width: 860px) {
  .page-wallpaper { background-attachment: scroll; }
}

.label-pill {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-bright);
  margin-left: 4px;
}

/* ---------- Cost basis table ---------- */
.pl-up { color: #4caf50; }
.pl-down { color: var(--danger); }

/* ---------- Tab bars and list tables ---------- */
.tab-bar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 10px;
                border-bottom: 1px solid var(--border-hairline); }
.tab-btn {
  background: none; border: 1px solid transparent; border-bottom: none;
  color: var(--text-muted); padding: 6px 12px; cursor: pointer;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tab-btn:hover { color: var(--text-main); }
.tab-btn.is-active {
  color: var(--accent-bright);
  border-color: var(--border-hairline);
  border-bottom: 2px solid var(--accent);
  background: var(--bg-panel);
}
.list-table .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.list-table .strong { font-weight: 600; }
.list-table th { white-space: nowrap; }

/* ---------- Notification bell ---------- */
.header-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.notif-bell { position: relative; }
.notif-bell > summary { list-style: none; cursor: pointer; position: relative; padding: 4px; }
.notif-bell > summary::-webkit-details-marker { display: none; }
.notif-icon { font-size: 17px; opacity: 0.8; }
.notif-bell > summary:hover .notif-icon { opacity: 1; }
.notif-count {
  position: absolute; top: -2px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #e8b13a; color: #1a1207;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.notif-panel {
  position: absolute; right: 0; top: 34px; z-index: 50;
  width: 320px; max-height: 420px; overflow-y: auto;
  background: var(--bg-base); border: 1px solid var(--border-hairline);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  color: var(--text-main);
}
.notif-head { display: flex; justify-content: space-between; align-items: center;
              padding: 8px 12px; border-bottom: 1px solid var(--border-hairline); }
.notif-item { padding: 8px 12px; border-bottom: 1px solid var(--border-hairline); }
.notif-item.is-unread { border-left: 2px solid var(--accent); }
.notif-title { font-size: 13px; }
.notif-body { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-foot { display: flex; justify-content: space-between; align-items: center;
              gap: 8px; margin-top: 4px; font-size: 11px; }

/* ---------- Forum index (phpBB-style) ---------- */
.fi-category { border: 1px solid var(--border-hairline); margin-bottom: 14px; }
.fi-cat-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.fi-cat-cols { display: flex; gap: 0; font-size: 10px; opacity: 0.85; }
.fi-cat-cols span { width: 70px; text-align: center; }
.fi-cat-cols span:last-child { width: 220px; text-align: left; padding-left: 12px; }
.fi-cat-desc { padding: 6px 12px; font-size: 12px; color: var(--text-muted);
               border-bottom: 1px solid var(--border-hairline); }
.fi-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-top: 1px solid var(--border-hairline); background: var(--bg-panel);
}
.fi-row:hover { background: var(--bg-base); }
.fi-row.is-locked { opacity: 0.75; }
.fi-icon { flex: 0 0 34px; text-align: center; }
.fi-icon img { width: 32px; height: 32px; object-fit: contain; }
.fi-glyph { font-size: 20px; }
.fi-main { flex: 1; min-width: 0; }
.fi-name { font-size: 15px; font-weight: 600; color: var(--accent-bright); text-decoration: none; }
.fi-name:hover { text-decoration: underline; }
.fi-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fi-subs { font-size: 11px; margin-top: 4px; }
.fi-subs a { color: var(--text-main); }
.fi-count { flex: 0 0 70px; text-align: center; font-size: 11px; color: var(--text-muted); }
.fi-count strong { display: block; font-size: 14px; color: var(--text-main); }
.fi-last { flex: 0 0 220px; font-size: 12px; min-width: 0; }
.fi-last a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 860px) {
  .fi-count, .fi-cat-cols { display: none; }
  .fi-last { flex-basis: 120px; }
}

/* ---------- Admin forum manager ---------- */
.forum-edit { position: relative; }
.forum-edit > summary { list-style: none; display: inline-block; }
.forum-edit > summary::-webkit-details-marker { display: none; }
.forum-edit[open] > .forum-edit-form,
.forum-edit[open] > div {
  background: var(--bg-base); border: 1px solid var(--border-hairline);
  padding: 10px; margin-top: 6px; min-width: 420px;
}
.forum-edit-form { display: block; }

/* ---------- Forum topics and posts (phpBB-style) ---------- */
.forum-crumbs { font-size: 12px; margin-bottom: 6px; }
.forum-crumbs a { color: var(--accent-bright); }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
          border-top: 1px solid var(--border-hairline); background: var(--bg-panel); }
.tl-row:hover { background: var(--bg-base); }
.tl-row.is-unread .tl-title { font-weight: 700; }
.tl-icon { flex: 0 0 30px; text-align: center; font-size: 16px; }
.tl-icon img { width: 26px; height: 26px; object-fit: contain; }
.tl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
          background: var(--border-hairline); }
.tl-row.is-unread .tl-dot { background: var(--accent-bright); }
.tl-main { flex: 1; min-width: 0; }
.tl-title { font-size: 14px; color: var(--text-main); text-decoration: none; }
.tl-title:hover { text-decoration: underline; }
.tl-by { font-size: 11px; }
.tl-type { font-size: 9px; font-family: var(--font-display); letter-spacing: 0.06em;
           text-transform: uppercase; padding: 1px 4px; margin-right: 4px;
           border: 1px solid currentColor; vertical-align: middle; }
.tl-type-global, .tl-type-announce { color: #e8b13a; }
.tl-type-sticky { color: var(--accent-bright); }

.topic-heading { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.topic-heading-icon { width: 28px; height: 28px; object-fit: contain; }
.topic-mod-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 10px;
                 padding: 6px 8px; border: 1px dashed var(--border-hairline); }

.topic-icon-pick { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; }
.topic-icon-pick label { cursor: pointer; border: 1px solid var(--border-hairline);
                         padding: 3px; display: flex; align-items: center; }
.topic-icon-pick input { display: none; }
.topic-icon-pick img { width: 24px; height: 24px; object-fit: contain; }
.topic-icon-pick input:checked + img,
.topic-icon-pick input:checked + .tip-none { outline: 2px solid var(--accent); }
.tip-none { font-size: 10px; color: var(--text-muted); padding: 0 4px; }

.fp-post { display: flex; border: 1px solid var(--border-hairline); margin: 8px 0;
           background: var(--bg-panel); }
.fp-author { flex: 0 0 150px; padding: 12px; border-right: 1px solid var(--border-hairline);
             text-align: center; background: var(--bg-base); }
.fp-avatar { width: 64px; height: 64px; object-fit: cover; margin: 0 auto 6px; display: block; }
.fp-avatar-blank { display: flex; align-items: center; justify-content: center;
                   border: 1px solid var(--border-hairline); font-weight: 700;
                   color: var(--text-muted); }
.fp-name { font-weight: 700; word-break: break-word; }
.fp-rank { font-size: 11px; color: var(--accent-bright); margin-top: 2px; }
.fp-rank-img { max-width: 100%; max-height: 40px; margin-top: 4px; }
.fp-meta { font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.fp-content { flex: 1; min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; }
.fp-head { display: flex; gap: 10px; align-items: center; font-size: 11px;
           padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--border-hairline); }
.fp-actions { margin-left: auto; display: flex; gap: 4px; }
.fp-edited { margin-top: auto; padding-top: 10px; font-size: 10px; color: var(--text-muted);
             font-style: italic; }

@media (max-width: 700px) {
  .fp-post { flex-direction: column; }
  .fp-author { flex: none; border-right: none; border-bottom: 1px solid var(--border-hairline);
               display: flex; gap: 10px; align-items: center; text-align: left; }
  .fp-avatar { width: 36px; height: 36px; margin: 0; }
}

/* ---------- Admin tab contrast fix ----------
   Two .admin-tab.active rules existed. The first set background: var(--accent);
   the second overrode only the text to var(--accent-bright) — which is the SAME
   value as --accent on most themes. Background from one rule, text from the
   other, identical colour: the active tab's label vanished. This sets both
   together, and uses the main text colour so it reads on any accent. */
.admin-tab.active {
  background: var(--bg-panel);
  color: var(--text-main);
  border-bottom-color: var(--accent);
}

/* The "Locked" checkbox label was inheriting body size and shouting. */
.forum-lock-label { font-size: 12px; color: var(--text-muted); }

@keyframes hands-spin { to { transform: rotate(360deg); } }

.itile-summary-label {
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

/* Near the left edge there is no room to centre the tooltip, so anchor it
   to the icon's left instead of letting it hang off-screen. */
@media (max-width: 760px) {
  /* Same guard for the notification dropdown: a fixed 320px panel on a
     360px screen is the same bug. */
  .notif-panel { width: min(320px, calc(100vw - 24px)); right: 0; }
}

/* Belt and braces: no popup may widen the page. A horizontal scrollbar on
   a vertical layout is always a bug, never a feature. */
/* "clip", not just "hidden": hidden turns the page into a scroll box of its
   own, which stops anything position: sticky from sticking (the side columns,
   the phone header). Browsers too old for clip keep hidden. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

/* The real cause of the sidebar's horizontal scrollbar:
   .col-left is 220px wide with overflow-y:auto, and once a container
   scrolls on one axis the other axis scrolls too. A 260px tooltip inside
   it therefore both overflowed the column AND got clipped by it.
   The tooltip now fits the column, and the column cannot scroll sideways. */
/* (.col-left is no longer a scroll box: static/columns.js keeps it in view.) */

/* ---------- Shared list control bar ----------
   Identical above and below every list: controls left, pager right, same
   order in both. Previously each page invented its own arrangement. */
.list-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; margin: 10px 0;
}
.list-bar-left { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.list-bar-pager { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.list-filters { display: inline-flex; gap: 2px; }
.list-filters .btn.is-on { color: var(--accent-bright); border-color: var(--accent); }
@media (max-width: 700px) {
  .list-bar { flex-direction: column; align-items: stretch; }
  .list-bar-pager { margin-left: 0; justify-content: space-between; }
}

/* ---------- BBCode composer ---------- */
.bbc-editor { margin-bottom: 8px; }
.bbc-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  padding: 4px; border: 1px solid var(--border-hairline); border-bottom: none;
  background: var(--bg-base);
}
.bbc-btn {
  background: none; border: 1px solid transparent; color: var(--text-main);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 5px 7px;
  min-width: 28px; border-radius: 2px;
}
.bbc-btn:hover { border-color: var(--border-hairline); background: var(--bg-panel); }
.bbc-sep { width: 1px; height: 18px; background: var(--border-hairline); margin: 0 4px; }
.bbc-area { width: 100%; box-sizing: border-box; border-radius: 0; display: block; }

.bbc-menu { position: relative; display: inline-block; }
.bbc-menu > summary { list-style: none; display: inline-block; }
.bbc-menu > summary::-webkit-details-marker { display: none; }
.bbc-menu-body {
  position: absolute; top: 30px; left: 0; z-index: 70;
  background: var(--bg-base); border: 1px solid var(--border-hairline);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55); padding: 6px; min-width: 120px;
}
.bbc-menu-item {
  display: block; width: 100%; text-align: left; background: none;
  border: none; color: var(--text-main); cursor: pointer; padding: 5px 8px; font-size: 12px;
}
.bbc-menu-item:hover { background: var(--bg-panel); }

/* Emoji are text, so size is just font-size — no image scaling anywhere. */
.bbc-emoji-body { width: 320px; max-height: 260px; overflow-y: auto; }
.bbc-emoji-group {
  font-family: var(--font-display); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); margin: 6px 0 3px;
}
.bbc-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.bbc-emoji-btn {
  background: none; border: none; cursor: pointer; padding: 3px;
  font-size: 20px; line-height: 1.2; border-radius: 3px;
}
.bbc-emoji-btn:hover { background: var(--bg-panel); }

/* Emoji inside posted content: capped so a wall of them cannot blow up a
   post, and reactions get their own smaller size. */
.forum-post-body, .bbc-preview-inner { --emoji-size: 1.15em; }
.bbc-preview { margin-top: 6px; }
.bbc-preview-inner {
  border: 1px dashed var(--border-hairline); border-top: none;
  padding: 10px; background: var(--bg-panel);
}

.bbc-btn-wide { min-width: 0; font-size: 11px; padding: 5px 8px; }

/* ---------- Avatar picker ---------- */
.avatar-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.avatar-choice { cursor: pointer; display: inline-block; line-height: 0; }
.avatar-choice input { display: none; }
.avatar-choice img { width: 56px; height: 56px; object-fit: cover;
                     border: 2px solid var(--border-hairline); }
.avatar-choice input:checked + img { border-color: var(--accent); }
.avatar-choice-none span { display: inline-block; padding: 8px 12px; font-size: 12px;
                           border: 2px solid var(--border-hairline); line-height: 1.2; }
.avatar-choice-none input:checked + span { border-color: var(--accent); color: var(--accent-bright); }

/* ---------- Profile page ---------- */
.profile-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                  padding: 4px 0 14px; }
.profile-header-avatar { width: 72px; height: 72px; object-fit: cover;
                         border: 1px solid var(--border-hairline); }
.profile-header-initials { display: flex; align-items: center; justify-content: center;
                           font-size: 24px; font-weight: 700; color: var(--text-muted); }
.profile-header-main h2 { margin: 0 0 3px; }
.profile-header-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
                       font-size: 12px; }
.profile-online { color: #4caf50; font-size: 13px; }
.profile-tab-body { padding-top: 12px; }

.wall-post { display: flex; gap: 10px; padding: 10px 0;
             border-bottom: 1px solid var(--border-hairline); }
.wall-post-avatar img, .wall-post-initials {
  width: 40px; height: 40px; object-fit: cover; display: flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline); color: var(--text-muted);
  font-weight: 700; font-size: 13px;
}
.wall-post-main { flex: 1; min-width: 0; }
.wall-post-head { display: flex; gap: 10px; align-items: center; font-size: 12px;
                  margin-bottom: 4px; }

.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
               gap: 10px; }
.friend-card { display: flex; flex-direction: column; align-items: center; gap: 5px;
               padding: 8px; border: 1px solid var(--border-hairline);
               background: var(--bg-panel); text-decoration: none; color: var(--text-main); }
.friend-card:hover { border-color: var(--accent); }
.friend-card img, .friend-initials {
  width: 56px; height: 56px; object-fit: cover; display: flex;
  align-items: center; justify-content: center; color: var(--text-muted); font-weight: 700;
}
.friend-name { font-size: 11.5px; text-align: center; word-break: break-word; }

/* ---------- Edit Profile: CSS-only tabs ---------- */
.edit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.edit-head h2 { margin: 0; }

.edit-tabs { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--border-hairline); }
.edit-tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.edit-tab {
  order: -1;                       /* labels sit above the panels */
  padding: 10px 18px; cursor: pointer;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.edit-tab:hover { color: var(--text-main); }
.edit-panel { display: none; width: 100%; padding-top: 14px; }
/* Each radio shows its own panel and lights its own label. */
#tab-profile_avatar:checked     ~ [data-tab="profile_avatar"],
#tab-profile_appearance:checked ~ [data-tab="profile_appearance"],
#tab-profile_bio:checked        ~ [data-tab="profile_bio"],
#tab-profile_privacy:checked    ~ [data-tab="profile_privacy"],
#tab-profile_wallpaper:checked  ~ [data-tab="profile_wallpaper"],
#tab-profile_security:checked   ~ [data-tab="profile_security"],
#tab-profile_socials:checked    ~ [data-tab="profile_socials"],
#tab-profile_blocks:checked     ~ [data-tab="profile_blocks"],
#tab-profile_work:checked       ~ [data-tab="profile_work"] { display: block; }
#tab-profile_avatar:checked     ~ [for="tab-profile_avatar"],
#tab-profile_appearance:checked ~ [for="tab-profile_appearance"],
#tab-profile_bio:checked        ~ [for="tab-profile_bio"],
#tab-profile_privacy:checked    ~ [for="tab-profile_privacy"],
#tab-profile_wallpaper:checked  ~ [for="tab-profile_wallpaper"],
#tab-profile_security:checked   ~ [for="tab-profile_security"],
#tab-profile_socials:checked    ~ [for="tab-profile_socials"],
#tab-profile_blocks:checked     ~ [for="tab-profile_blocks"],
#tab-profile_work:checked       ~ [for="tab-profile_work"] {
  color: var(--accent-bright); border-bottom-color: var(--accent); background: var(--bg-panel);
}

/* ---------- The nuclear button ---------- */
.danger-zone { margin-left: auto; position: relative; }
.danger-zone > summary {
  list-style: none; cursor: pointer; font-size: 17px; line-height: 1;
  padding: 6px 9px; border: 1px solid var(--border-hairline);
  color: var(--text-muted); border-radius: 3px;
}
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone > summary:hover { color: var(--danger); border-color: var(--danger); }
.danger-body {
  position: absolute; right: 0; top: 36px; z-index: 80;
  width: min(320px, calc(100vw - 32px)); padding: 12px;
  background: var(--bg-base); border: 1px solid var(--danger);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6); font-size: 12px; line-height: 1.5;
}
.danger-body .muted-note { font-size: 11.5px; }
.danger-confirm { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.danger-go { color: var(--danger); border-color: var(--danger); width: 100%; }
.danger-go[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- Reactions ----------
   Image reactions are forced to 32px however large the file is, so an
   admin can drop in 600 images of any size without breaking a layout. */
.rx-strip { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; }
.rx-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border: 1px solid var(--border-hairline);
  border-radius: 11px; background: var(--bg-base);
  cursor: pointer; line-height: 1; color: var(--text-main);
}
.rx-chip:hover { border-color: var(--accent); }
.rx-chip.is-mine { border-color: var(--accent); background: var(--bg-panel); }
.rx-chip.is-readonly { cursor: default; opacity: 0.8; }
.rx-emoji { font-size: 16px; }
.rx-img { width: 32px; height: 32px; object-fit: contain; display: block; }
.rx-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.rx-chip.is-mine .rx-count { color: var(--accent-bright); }
.rx-own { font-size: 11px; }

.rx-add { position: relative; display: inline-block; }
.rx-add > summary { list-style: none; }
.rx-add > summary::-webkit-details-marker { display: none; }
.rx-add-btn { font-size: 13px; color: var(--text-muted); padding: 3px 9px; }

.rx-picker {
  position: absolute; left: 0; top: 28px; z-index: 75;
  width: min(300px, calc(100vw - 32px)); padding: 8px;
  background: var(--bg-base); border: 1px solid var(--border-hairline);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.rx-picker-cats { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px;
                  max-height: 74px; overflow-y: auto; }
.rx-picker-cats .btn.is-on { color: var(--accent-bright); border-color: var(--accent); }
.rx-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.rx-pick { background: none; border: 1px solid transparent; cursor: pointer;
           padding: 3px; font-size: 19px; line-height: 1.2; border-radius: 3px; }
.rx-pick:hover { border-color: var(--accent); background: var(--bg-panel); }
.rx-picker-pager { display: flex; gap: 6px; align-items: center; justify-content: center;
                   margin-top: 6px; }

/* Reactions sit at the BOTTOM of the post cell, under a rule, so they read
   as a footer rather than as part of the message. */
.fp-content .rx-strip {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-hairline);
}
/* The edit line follows the reactions, so it must not also claim the
   bottom or the two fight over the same space. */
.fp-content .fp-edited { margin-top: 6px; padding-top: 0; }
.wall-post .rx-strip { margin-top: 8px; padding-top: 6px;
                       border-top: 1px solid var(--border-hairline); }

/* ---------- Sidebar: one block, ruled sections ---------- */
.side-divider { height: 1px; background: var(--border-hairline); margin: 10px 0; }
.side-action { padding: 0 12px 2px; }

/* Compact, icon-led buttons. The old full-width secondary button dominated
   the column; these read as controls rather than calls to action. */
.btn-side {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%; justify-content: center;
  padding: 5px 8px; font-size: 11px; line-height: 1.4;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--border-hairline); background: none;
  color: var(--text-muted); cursor: pointer; text-decoration: none;
}
.btn-side:hover { color: var(--text-main); border-color: var(--accent); }
.side-ico { font-size: 12px; line-height: 1; }

.btn-signout:hover { color: var(--danger); border-color: var(--danger); }
.btn-settings { margin-bottom: 6px; }                      /* 2.66.0: Settings & privacy, above Sign out */

/* ---------- Profile: edit button in the panel corner ---------- */
.crate-panel { position: relative; }
.profile-edit-btn { position: absolute; top: 12px; right: 12px; z-index: 2; }
@media (max-width: 620px) {
  .profile-edit-btn { position: static; display: inline-block; margin-bottom: 8px; }
}

.fp-avatar { width: 32px; height: 32px; object-fit: cover; border-radius: 3px; }

/* Drop preview clips: same box as a tile image, motion optional. */
.drop-clip { max-height: 84px; max-width: 86%; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) {
  /* Respect a visitor who has asked their system for less movement. */
  .drop-clip { animation: none; }
}

.drop-clip { cursor: pointer; }

/* ---------- Tab strips that scale ----------
   Eight tabs no longer fit a laptop at the old size. They shrink to a
   floor, then wrap, and on a phone the strip scrolls sideways within
   itself rather than widening the page. */
.tab-bar {
  flex-wrap: wrap;
  gap: 1px;
}
.tab-btn {
  padding: 8px clamp(7px, 1.1vw, 16px);
  font-size: clamp(9.5px, 0.78vw, 11px);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .tab-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn { flex: 0 0 auto; }
}

.ladder tbody { display: block; max-height: 280px; overflow-y: auto; }
.ladder thead, .ladder tbody tr { display: table; width: 100%; table-layout: fixed; }

/* Alternating rows, everywhere a table appears. */
.zebra tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--text-main) 3%, transparent); }
.zebra tbody tr:hover { background: color-mix(in srgb, var(--text-main) 7%, transparent); }
.tx-table td, .tx-table th { padding: 5px 8px; }

/* ---------- Sortable column headers ---------- */
th.sortable { padding: 0; }
th.sortable button {
  width: 100%; background: none; border: none; cursor: pointer;
  color: inherit; font: inherit; padding: 6px 8px;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
th.sortable.num button { justify-content: flex-end; }
th.sortable button:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 6%, transparent); }
th.sortable.is-sorted button { color: var(--accent-bright); }

/* A hint that the header does something, without shouting about it. */
th.sortable:not(.is-sorted) button::after {
  content: "⇅"; font-size: 8px; opacity: 0; margin-left: 2px;
}
th.sortable:not(.is-sorted) button:hover::after { opacity: 0.45; }

/* Older browsers without color-mix still get a clear marker. */

/* ---------- Admin: BBCode profiles ---------- */
.bbc-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
                    gap: 4px; margin-top: 6px; }
.bbc-feature { display: flex; gap: 6px; align-items: center; font-size: 12px; cursor: pointer; }
/* [img] is the one tag that can expose a reader's IP, so it looks different. */
.bbc-feature-risky { color: var(--danger); }
.bbc-feature-risky span { font-size: 11px; letter-spacing: 0.02em; }

/* Member names link to their profiles, but read as names, not as links
   shouting for attention: the underline appears on hover. */
.user-link { color: inherit; text-decoration: none; }
.user-link:hover, .user-link:focus-visible { color: var(--accent-bright); text-decoration: underline; }

/* ---------- Find someone (2.78.0: your own Friends tab, app/find798.py; the old Members page's cards) ---------- */
.fs-box { margin: 0 0 22px; padding: 16px; border: 1px solid var(--border-hairline); background: var(--bg-panel); }
.fs-box h3 { margin: 0 0 10px; }
.fs-form { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; max-width: 420px; }
.fs-form label { font-weight: 600; font-size: 16px; }
.fs-form input { width: 100%; font-size: 17px; min-width: 0; }
.fs-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.fs-row .fs-code-in { flex: 1 1 160px; width: auto; text-transform: uppercase; letter-spacing: .08em; }
.fs-hint { margin: 2px 0 8px; font-size: 14px; }
.fs-msg, .fs-said { margin: 8px 0; font-size: 15px; }
.fs-mine { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-hairline); }
.fs-mine-line { margin: 0 0 8px; font-size: 16px; }
.fs-code { font-size: 22px; letter-spacing: .12em; font-family: var(--font-mono, monospace); white-space: nowrap; }
.fs-who { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
a.fs-who:hover .member-name, a.fs-who:focus-visible .member-name { text-decoration: underline; }
.fs-state { font-size: 15px; }
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
                gap: 10px; margin: 12px 0; }
.member-card { display: flex; flex-direction: column; align-items: center; gap: 8px;
               padding: 14px 10px; border: 1px solid var(--border-hairline);
               background: var(--bg-panel); text-decoration: none; color: inherit; text-align: center; }
.member-card:hover, .member-card:focus-within { border-color: var(--accent); }
.member-avatar { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--border-hairline); }
.member-initials { display: flex; align-items: center; justify-content: center;
                   font-size: 20px; font-weight: 700; background: var(--bg-base); color: var(--text-muted); }
.member-name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }

/* ---------- Click-to-play video ---------- */
.bbcode-video { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9;
                margin: 8px 0; background: #000; border: 1px solid var(--border-hairline); }
.bbcode-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bbcode-video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
                     display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
                     background: repeating-linear-gradient(135deg, #111 0 12px, #161616 12px 24px); color: var(--text-main); }
.bbcode-video-play:hover .bbcode-video-icon, .bbcode-video-play:focus-visible .bbcode-video-icon {
                     background: var(--accent); color: var(--on-accent); }
.bbcode-video-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center;
                     justify-content: center; font-size: 26px; padding-left: 4px;
                     background: rgba(255,255,255,0.12); border: 2px solid var(--accent); }
.bbcode-video-label { font-weight: 600; }
.bbcode-video-note { font-size: 11px; color: var(--text-muted); }
.bbcode-video-link { display: inline-block; margin: 6px 0; padding: 6px 12px; border: 1px solid var(--accent);
                     color: var(--accent); text-decoration: none; }

/* ---------- Color wheel menu ---------- */
.bbc-colorpick { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 150px; }
.bbc-color-input { width: 100%; height: 44px; padding: 0; border: 1px solid var(--border-hairline);
                   background: none; cursor: pointer; }

/* ---------- Color wheel (static/colorwheel.js), used site-wide ---------- */
.cw-swatch { display: inline-block; width: 56px; height: 34px; padding: 0; cursor: pointer;
             border: 1px solid var(--border-hairline); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35); }
.cw-swatch:hover, .cw-swatch:focus-visible { border-color: var(--accent-bright); }
.bbc-colorpick .cw-swatch { width: 100%; height: 40px; }
.cw-pop { position: absolute; z-index: 1000; padding: 12px; width: 206px;
          background: var(--bg-panel); border: 1px solid var(--border-hairline);
          box-shadow: 0 8px 28px rgba(0,0,0,0.55); }
.cw-wheel { position: relative; width: 180px; height: 180px; margin: 0 auto 10px; }
.cw-wheel canvas { display: block; border-radius: 50%; cursor: crosshair; touch-action: none; }
.cw-marker { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
             border: 2px solid #fff; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.cw-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.cw-row input[type=range] { flex: 1; }
.cw-preview { width: 26px; height: 26px; flex: none; border: 1px solid var(--border-hairline); }
.cw-hex { width: 80px; font-family: var(--font-mono); font-size: 12px; padding: 4px;
          background: var(--bg-base); color: var(--text-main); border: 1px solid var(--border-hairline); }
.cw-done { margin-left: auto; padding: 4px 10px; cursor: pointer; background: var(--accent);
           color: var(--on-accent); border: 0; }

/* ---------- Friends and blocking ---------- */
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.profile-block { color: var(--text-muted); }
.profile-block:hover { color: var(--danger); border-color: var(--danger); }
.friend-requests h3 { font-size: 14px; margin: 12px 0 6px; }
.fr-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.fr-who { display: inline-flex; align-items: center; gap: 6px; color: inherit; min-width: 140px; }
.fr-avatar { width: 24px; height: 24px; object-fit: cover; }
.fr-blocked { margin-top: 8px; }

/* ---------- Social icons ---------- */
.social-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.social-icons img { width: 35px; height: 35px; display: block; }
.social-icons a { line-height: 0; border-radius: 4px; }
.social-icons a:hover, .social-icons a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
.social-forum { justify-content: center; }
.socials-row { display: grid; grid-template-columns: 35px 90px minmax(0, 1fr) auto;
               align-items: center; gap: 10px; padding: 5px 0; }
.socials-label { font-weight: 600; }
.socials-forum { font-size: 12px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.socials-forum input:disabled + * , .socials-forum:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* ---------- Chatrooms ----------
   Colours come only from the site theme's own variables, so chat follows
   whatever theme is set. Status: online = accent, away = brass, busy = danger. */
.chat-section { font-family: var(--font-display); font-size: 13px; margin: 20px 0 8px;
                color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.chat-card { display: flex; justify-content: space-between; align-items: center; gap: 12px;
             padding: 10px 14px; margin-bottom: 6px; background: var(--bg-panel);
             border: 1px solid var(--border-hairline); border-left: 3px solid var(--accent); }
.chat-card:hover { background: var(--bg-panel-raised); }
.chat-card.is-locked { opacity: .55; border-left-color: var(--border-hairline); }
.chat-card-name { font-weight: 700; font-size: 15px; color: var(--text-main); text-decoration: none; }
a.chat-card-name:hover { color: var(--accent-bright); }
.chat-card-lock { font-size: 11px; margin-left: 8px; padding: 1px 6px; color: var(--brass);
                  border: 1px solid var(--border-hairline); }
.chat-card-topic { margin-top: 2px; }
.chat-card-people { display: flex; align-items: center; gap: 3px; flex: none; }
.chat-card-people img, .chat-mini { width: 24px; height: 24px; object-fit: cover; border-radius: 50%;
                                    border: 1px solid var(--border-hairline); }
.chat-mini { display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
             background: var(--bg-base); color: var(--text-muted); }
.chat-count { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.chat-myroom { display: grid; grid-template-columns: 1fr 1.5fr auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
@media (max-width: 760px) { .chat-myroom { grid-template-columns: 1fr; } }

/* the room */
.chat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
             padding-bottom: 10px; border-bottom: 1px solid var(--border-hairline); }
.chat-title { margin: 2px 0 0; font-family: var(--font-display); }
.chat-head-tools { display: flex; align-items: center; gap: 10px; }
.chat-head-tools select { width: auto; padding: 4px 8px; }
.chat-pinned { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 10px;
               background: var(--bg-panel-raised); border: 1px solid var(--border-hairline); border-left: 3px solid var(--brass); }
.chat-pin-label { font-weight: 700; color: var(--brass); flex: none; }
.chat-pinned .chat-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 12px; margin-top: 10px; }
@media (max-width: 760px) { .chat-body { grid-template-columns: 1fr; } .chat-users { order: -1; } }
.chat-log { height: 58vh; min-height: 320px; overflow-y: auto; padding: 6px 0;
            background: var(--bg-base); border: 1px solid var(--border-hairline); }

/* one message: avatar gutter, then name + time over the text */
.chat-msg { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr);
            padding: 6px 12px 2px 0; line-height: 1.45; overflow-wrap: anywhere; }
.chat-msg.is-grouped { padding-top: 0; }
.chat-msg:hover { background: var(--bg-panel); }
.chat-gutter { display: flex; justify-content: center; align-items: flex-start; padding-top: 2px; }
.chat-av { width: 32px; height: 32px; max-width: 32px; max-height: 32px; object-fit: cover;
           border-radius: 50%; border: 1px solid var(--border-hairline); display: block; }
.chat-av-blank { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
                 background: var(--bg-panel-raised); color: var(--text-muted); box-sizing: border-box; }
.chat-head-line { display: flex; align-items: baseline; gap: 8px; }
.chat-who { font-weight: 700; color: var(--accent-bright); text-decoration: none; }
.chat-who:hover { text-decoration: underline; }
.chat-time { font-size: 11px; color: var(--text-muted); }
.chat-time-hover { visibility: hidden; font-size: 10px; padding-top: 3px; }
.chat-msg.is-grouped:hover .chat-time-hover { visibility: visible; }
.chat-text { color: var(--text-main); }
.chat-text img { max-width: 100%; height: auto; }

.chat-whisper-tag { font-size: 11px; color: var(--brass); }
.chat-system { grid-column: 2; color: var(--text-muted); font-style: italic; font-size: 13px; }
.chat-notice { display: block; padding: 4px 12px 4px 48px; color: var(--text-muted); font-style: italic; font-size: 13px; }
.chat-page { color: var(--accent-bright); font-style: normal; }
.chat-ejected { color: var(--danger); }
.chat-mentions-me { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.chat-flash { animation: chatflash 2.5s ease-out; }
@keyframes chatflash { from { background: color-mix(in srgb, var(--accent) 35%, transparent); } to { background: transparent; } }
.chat-tools { position: absolute; right: 8px; top: 4px; display: none; gap: 2px; }
.chat-msg:hover .chat-tools, .chat-msg:focus-within .chat-tools { display: inline-flex; }
.chat-tool { border: 1px solid var(--border-hairline); background: var(--bg-panel-raised); color: var(--text-muted);
             font-size: 11px; padding: 1px 6px; cursor: pointer; }
.chat-tool:hover { color: var(--text-main); border-color: var(--accent); }
.chat-typing { min-height: 18px; padding: 3px 4px; font-size: 12px; }
.chat-state { padding: 0 4px; color: var(--danger); font-size: 12px; }
.chat-send-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.chat-input textarea { min-height: 64px; }

/* the people in the room */
.chat-users { align-self: start; padding: 10px; background: var(--bg-panel); border: 1px solid var(--border-hairline); }
.chat-users h3 { font-family: var(--font-display); font-size: 12px; margin: 0 0 8px; color: var(--text-muted);
                 text-transform: uppercase; letter-spacing: .08em; }
.chat-users ul { list-style: none; margin: 0; padding: 0; }
.chat-person { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.chat-person-pic { position: relative; flex: none; width: 32px; height: 32px; }
.chat-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
            background: var(--accent-bright); border: 2px solid var(--bg-panel); }
.chat-person.is-away .chat-dot { background: var(--brass); }
.chat-person.is-busy .chat-dot { background: var(--danger); }
.chat-person-name { color: var(--text-main); text-decoration: none; min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chat-person-name:hover { color: var(--accent-bright); }
.chat-role { font-size: 10px; padding: 0 5px; border: 1px solid var(--border-hairline); color: var(--text-muted);
             text-transform: uppercase; letter-spacing: .05em; flex: none; }

.profile-chat-link { margin-top: 8px; display: inline-block; }
.chat-hist { padding: 3px 0; border-bottom: 1px solid var(--border-hairline); }
.chat-hist.is-deleted { opacity: .55; }

/* ---------- Admin → Chatrooms ---------- */
.ac-section { margin-bottom: 22px; }
.ac-section h3 { font-family: var(--font-display); font-size: 14px; margin: 0 0 8px; }
.ac-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; align-items: end; }
.ac-settings label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); }
.ac-settings input { width: 120px; }
.ac-create, .ac-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ac-create .profile-input, .ac-edit .profile-input { width: auto; flex: none; }
.ac-create input[name=name], .ac-edit input[name=name] { width: 200px; }
.ac-create input[name=topic], .ac-edit input[name=topic] { flex: 1 1 200px; min-width: 200px; }
.ac-rooms tr.ac-live td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ac-detail td { background: var(--bg-panel-raised); padding: 12px; }
.ac-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 6px; }
.ac-lists > div { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ac-lists > div > b { width: 100%; font-size: 12px; color: var(--text-muted); }
.ac-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; font-size: 12px;
           border: 1px solid var(--border-hairline); background: var(--bg-panel); }
.ac-chip button { border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: 0 3px; }
.ac-chip button:hover { color: var(--danger); }
.ac-inline { display: flex; gap: 4px; width: 100%; margin-top: 4px; }
.ac-inline input, .ac-inline select { flex: 1; min-width: 0; }
.ac-danger { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.ac-delete:hover { color: var(--danger); border-color: var(--danger); }

/* ---------- Messages (DMs) ---------- */
.nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px;
             font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
             background: var(--accent); color: var(--text-main); }
.dm-start { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.dm-start input { max-width: 320px; }
.dm-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 4px;
          background: var(--bg-panel); border: 1px solid var(--border-hairline); text-decoration: none; color: inherit; }
.dm-row:hover { background: var(--bg-panel-raised); }
.dm-row.is-unread { border-left: 3px solid var(--accent); }
.dm-row.is-unread .dm-name { color: var(--accent-bright); }
.dm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-name { font-weight: 700; color: var(--text-main); }
.dm-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.ac-report { padding: 10px; margin-bottom: 8px; background: var(--bg-panel-raised);
             border: 1px solid var(--border-hairline); border-left: 3px solid var(--danger); }
.ac-report-body { margin: 6px 0 8px; padding: 6px 8px; background: var(--bg-base); }

/* ---------- Calls ---------- */
.call-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2000;
               display: flex; align-items: center; gap: 10px; padding: 8px 14px;
               background: var(--bg-panel-raised); border: 1px solid var(--accent);
               box-shadow: 0 8px 26px rgba(0,0,0,.5); max-width: calc(100vw - 20px); }
.call-banner[hidden] { display: none; }
.call-banner-icon { font-size: 22px; display: inline-block; animation: callshake 1.2s ease-in-out infinite; }
@keyframes callshake {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30%, 50% { transform: rotate(-14deg); }
  20%, 40%      { transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) { .call-banner-icon { animation: none; } }
.call-banner-text { font-weight: 600; color: var(--text-main); }
.dm-dnd { margin-bottom: 10px; font-size: 13px; }
.ac-calls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; }
.ac-calls label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); }
.ac-calls label:has(input[type=checkbox]) { flex-direction: row; align-items: center; color: var(--text-main); }
.ac-calls .ac-wide { flex: 1 1 100%; }
.ac-calls textarea { width: 100%; font-family: var(--font-mono); }

/* the call window */
.call-body { margin: 0; min-height: 100vh; background: var(--bg-base); color: var(--text-main);
             font-family: var(--font-body); display: flex; }
.call-wrap { flex: 1; display: flex; flex-direction: column; padding: 14px; gap: 10px; }
.call-stage { position: relative; flex: 1; min-height: 300px; background: #000; border: 1px solid var(--border-hairline);
              display: flex; align-items: center; justify-content: center; overflow: hidden; }
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
.call-local { position: absolute; right: 12px; bottom: 12px; width: 22%; max-width: 220px; min-width: 120px;
              border: 2px solid var(--border-hairline); background: #111; display: none; z-index: 2; }
.is-video .call-remote, .is-video .call-local { display: block; }
.call-players { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; }
.is-video .call-players { position: absolute; left: 12px; top: 12px; gap: 8px; transform: scale(.6); transform-origin: top left; }
.call-player { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 20px; min-width: 150px;
               background: var(--bg-panel); border: 1px solid var(--border-hairline); border-top: 3px solid var(--accent); }
.call-player img, .call-initial { width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
                                  border: 2px solid var(--border-hairline); }
.call-initial { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700;
                background: var(--bg-panel-raised); color: var(--text-muted); }
.call-link { font-size: 22px; color: var(--text-muted); }
.call-status { text-align: center; padding: 6px; font-size: 14px; color: var(--text-muted); }
.call-status.is-ok { color: var(--accent-bright); }
.call-status.is-ended { color: var(--danger); }
.call-controls { display: flex; justify-content: center; gap: 10px; }
.call-controls .is-on { border-color: var(--danger); color: var(--danger); }
.call-hangup { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.call-note { text-align: center; font-size: 13px; color: var(--brass); margin-top: -4px; }
.no-cam .call-local { display: none; }

/* ---------- Inbox ---------- */
a.notif-bell { position: relative; display: inline-flex; align-items: center; text-decoration: none; }
.inbox-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-hairline); margin-bottom: 14px; }
.inbox-tab { padding: 8px 14px; color: var(--text-muted); text-decoration: none; border: 1px solid transparent;
             border-bottom: 0; margin-bottom: -1px; }
.inbox-tab:hover { color: var(--text-main); }
.inbox-tab.is-active { color: var(--text-main); background: var(--bg-panel); border-color: var(--border-hairline);
                       box-shadow: inset 0 3px 0 var(--accent); }
.inbox-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.inbox-filter { font-size: 12px; padding: 2px 9px; border: 1px solid var(--border-hairline); color: var(--text-muted); text-decoration: none; }
.inbox-filter.is-active { color: var(--text-main); border-color: var(--accent); }
.inbox-clear { margin-left: auto; }
.note-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 4px;
            background: var(--bg-panel); border: 1px solid var(--border-hairline); color: inherit; text-decoration: none; }
a.note-row:hover { background: var(--bg-panel-raised); }
.note-row.is-unread { border-left: 3px solid var(--accent); }
.note-row.is-unread .note-title { color: var(--accent-bright); }
.note-icon { width: 28px; flex: none; text-align: center; font-size: 18px; font-weight: 700; color: var(--brass); }
.note-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.note-title { font-weight: 600; color: var(--text-main); }
.note-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-at { flex: none; font-size: 12px; }

/* ---------- Voice notes and video clips ---------- */
.chat-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.chat-rec-live { display: inline-flex; align-items: center; gap: 6px; }
.chat-rec-live[hidden] { display: none; }
.chat-rec-dot { color: var(--danger); animation: recblink 1s steps(2) infinite; }
@keyframes recblink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .chat-rec-dot { animation: none; } }
.chat-rec-time { font-family: var(--font-mono); font-size: 12px; }
.chat-rec-preview { width: 120px; border: 1px solid var(--border-hairline); background: #000; }
.chat-media { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; max-width: 420px; }
.chat-media audio { width: 100%; max-width: 320px; height: 36px; }
.chat-media video { width: 100%; max-height: 320px; background: #000; border: 1px solid var(--border-hairline); }
.chat-media-label { font-size: 11px; color: var(--text-muted); }
.chat-media.is-expired { color: var(--text-muted); font-style: italic; font-size: 13px; }

/* ---------- The sign-in block (templates/fragments/login_block.html) ----------
   On the coming-soon page it's styled by static/splash_blocks.css; this is for
   the same block anywhere else (an admin arranging the Visitors layout). */
.lb { font-size: 13px; scroll-margin-top: 16px; }
.lb-wrap { display: grid; gap: 8px; }
.lb-headrow { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lb-head { font-weight: 700; font-size: 15px; color: var(--text-main); margin: 0; }
.lb-form { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.lb-form > * { min-width: 0; max-width: 100%; }   /* 2.71.1: nothing in the sign-in block may widen it past its column (owner's screenshot, 31 Oct) */
.lb-form input { width: 100%; min-width: 0; box-sizing: border-box; }
.lb-form .btn { width: 100%; }
.lb-msg:empty { display: none; }
.lb-invite > summary { cursor: pointer; font-size: 12px; color: var(--accent-bright); }
.lb-invite[open] > summary { margin-bottom: 6px; }
/* A small ⓘ that opens on hover, or on a tap (focus) on phones. */
.infotip { position: static; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
           border-radius: 50%; font-size: 12px; line-height: 1; cursor: help; color: var(--text-muted); flex: none; }
.infotip:hover, .infotip:focus-visible { color: var(--accent-bright); outline: none; }
.infotip-box { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; padding: 8px 10px;
               font-size: 12px; line-height: 1.45; font-weight: 400; color: var(--text-main); background: var(--bg-panel);
               border: 1px solid var(--border-hairline); border-radius: var(--radius-sm, 8px); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.infotip:hover .infotip-box, .infotip:focus .infotip-box, .infotip:focus-within .infotip-box { display: block; }
.splash-standin { font-size: 13px; line-height: 1.5; }

/* ── Members' own blocks (app/member_blocks.py, migration 010) ────────────
   The editor in Edit Profile -> My blocks, the lists (theirs and Admin ->
   Blocks -> Members' blocks), the profile section and the "My chat room"
   block with its live frame. Own colours and pictures come from the core
   (core.css .has-own-look / .has-own-wall). */
.mb-chart { margin-top: 6px; }
.mb-body + .mb-chart { margin-top: 10px; }
.mb-body { overflow-wrap: anywhere; }
/* the editor */
.mb-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mb-edit-head h3 { margin: 0; }
.mb-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 22px; align-items: start; }
@media (max-width: 760px) { .mb-edit-grid { grid-template-columns: minmax(0, 1fr); } }
.mb-preview-wrap { position: sticky; top: 12px; min-width: 0; }
.mb-preview .mb-panel { max-width: 300px; }
.mb-field { margin-bottom: 14px; min-width: 0; }
.mb-field > .profile-input, .mb-field select.profile-input { width: 100%; box-sizing: border-box; }
.mb-look { border: 0; padding: 0; min-width: 0; }
.mb-look legend { padding: 0; }
.mb-radio { margin-right: 14px; font-size: 13px; }
.mb-own-colours { display: none; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.mb-form:has(input[name="look"][value="own"]:checked) .mb-own-colours { display: flex; }
.mb-colour { display: flex; align-items: center; gap: 6px; font-size: 13px; }
                 border-radius: 6px; padding: 5px 8px; color: var(--text-main); cursor: pointer; font-size: 13px; }
           border-radius: 999px; background: var(--bg-panel-raised, var(--bg-panel)); border: 1px solid var(--border-hairline); }
.mb-wall-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mb-wall-slot { display: inline-flex; align-items: center; gap: 6px; }
.mb-wall-thumb { width: 64px; height: 36px; border-radius: 4px; background-size: cover; background-position: center; border: 1px solid var(--border-hairline); }
.mb-wall-picker:not(:empty) { margin-top: 8px; max-height: 320px; overflow: auto; }
.mb-op-label { display: block; margin-top: 10px; }
.mb-field input[type="range"] { width: 100%; }
.mb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.mb-actions { display: flex; gap: 8px; margin-top: 4px; }
.mb-count { font-size: 11px; margin: 6px 0 0; }
.mb-count.is-over { color: var(--danger); }
.mb-note { font-size: 12px; margin: 4px 0 0; }

/* the lists (My blocks, Admin -> Blocks -> Members' blocks) */
.mb-table td { vertical-align: middle; }
.mb-table tr.is-off td { opacity: .65; }
.mb-row-actions { white-space: nowrap; text-align: right; }
.mb-off { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--danger); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; }
.mb-limits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; margin-bottom: 10px; align-items: end; }
.mb-limit { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.mb-limit input { width: 110px; }

/* on a profile */
.mb-profile { margin: 14px 0 6px; }
.mb-profile-note { font-size: 12px; margin: 0 0 6px; }
.mb-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.mb-panel { margin: 0; min-width: 0; }
/* the "Colour over the picture" slider only matters once there's a picture */
.mb-form:has(#mb-wall-slot input[name="wallpaper"][value=""]) .mb-op-label,
.mb-form:has(#mb-wall-slot input[name="wallpaper"][value=""]) #mb-op { display: none; }

/* "My chat room" block (templates/fragments/member_block_chat.html) and its live frame (templates/chat_embed.html) */
.mb-chat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.mb-chat-log { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 13px; }
.mb-chat-msg { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.mb-chat-who { font-weight: 600; }
.mb-chat-msg.is-system, .mb-chat-msg.is-me { font-style: italic; color: var(--text-muted); }
.mb-chat-msg time { margin-left: auto; font-size: 11px; }
.mb-chat-body { min-width: 0; overflow-wrap: anywhere; }
.mb-chat-full { display: inline-block; margin-left: 8px; font-size: 12px; }
.mb-chat-frame { width: 100%; height: 420px; border: 0; border-radius: var(--radius-md, 12px); background: var(--bg-panel); display: block; margin-bottom: 6px; }
body.chat-embed { margin: 0; background: var(--bg-panel); min-height: 100vh; }
body.chat-embed .chat-room { display: flex; flex-direction: column; height: 100vh; padding: 8px; box-sizing: border-box; }
body.chat-embed .chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chat-embed-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; margin-bottom: 6px; font-size: 12px; }
.chat-embed-tools { display: inline-flex; gap: 8px; align-items: center; }
.chat-embed-tools select { padding: 2px 6px; font-size: 12px; }
body.chat-embed .chat-input textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.chat-embed-people summary { cursor: pointer; }
.chat-embed-people ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; }
.chat-embed-tools label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chat-embed-tools a { white-space: nowrap; }
/* A narrow "My chat room" frame (a side column): no avatar gutter, the name and time
   above each line, and the sounds / status controls folded away. The frame's own
   width is what these media queries see. */
body.chat-embed .chat-log { height: auto; min-height: 0; }
body.chat-embed .chat-notice { padding-left: 8px; }
@media (max-width: 360px) {
  body.chat-embed .chat-room { padding: 4px; }
  body.chat-embed .chat-msg { display: block; padding: 4px 8px; }
  body.chat-embed .chat-gutter { display: none; }
  body.chat-embed .chat-head-line { flex-wrap: wrap; gap: 4px 8px; }
  .chat-embed-tools label, .chat-embed-tools select { display: none; }
}

/* What's new (app/site_updates.py) */
.upd-list { list-style: none; margin: 0; padding: 0; }
.upd-item { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
            padding: 7px 0; border-bottom: 1px solid var(--border-hairline); }
.upd-item .upd-badge { justify-self: start; }
.recent-pages-block, #updates-list, #admin-updates-list { container-type: inline-size; }
@container (max-width: 340px) {           /* in a side column: the badge sits above the title */
  .upd-item { grid-template-columns: minmax(0, 1fr) auto; }
  .upd-item .upd-badge { grid-column: 1 / -1; }
}
.upd-item:last-child { border-bottom: 0; }
.upd-item.is-hidden { opacity: .55; }
.upd-badge { font: 700 10px/1 var(--font-display, inherit); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px;
             border: 1px solid currentColor; white-space: nowrap; }
.upd-new { color: var(--up, var(--good, #3fb950)); }
.upd-changed { color: var(--brass, #c9a227); }
.upd-fixed { color: var(--rust-bright, var(--accent)); }
.upd-title { font-weight: 600; font-size: 13.5px; }
.upd-body { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.upd-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.upd-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.upd-compact .upd-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upd-all { display: inline-block; margin: 8px 0 4px; font-size: 12.5px; }
.upd-pages-label { margin: 10px 0 2px; font: 600 11px var(--font-display, inherit); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.upd-page-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-hairline); }
.upd-form-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 8px; }
.upd-form-row label { display: flex; flex-direction: column; gap: 3px; }
.upd-form-row .upd-grow { flex: 1 1 260px; }
.upd-settings { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; }
.upd-settings h4 { flex-basis: 100%; }
/* Chatrooms page: a private room's invites */
.chat-invites { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-md, 12px); background: var(--tint-soft, rgba(255,255,255,.03)); }
.chat-invites h3 { margin: 0 0 6px; font-size: 14px; }
.chat-invited { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.chat-invite-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.chat-invite-link input { width: min(100%, 460px); }
.chat-invites .chat-myroom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chat-invites .chat-myroom input { flex: 1 1 220px; min-width: 0; }
.chat-invites .chat-myroom button, .chat-invite-link button { flex: 0 0 auto; }
.chat-invite-link label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
.chat-invite-link input { width: 100%; }

/* Admin: four sections, each with its own row of tabs (templates/admin.html) */
.admin-sections { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.admin-section { font-family: var(--font-display); font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
                 padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-hairline);
                 background: var(--bg-panel); color: var(--text-muted); cursor: pointer; transition: color .15s, background .15s; }
.admin-section:hover { color: var(--text-main); }
.admin-section.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.admin-tabs-bar[hidden] { display: none; }
@media (max-width: 640px) {
  .admin-sections, .admin-tabs-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .admin-section, .admin-tab { flex: 0 0 auto; white-space: nowrap; }
}


/* Edit Profile → Picture / Wallpaper: titled sets, a few at a time (templates/fragments/image_sets.html) */
.img-sets-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.img-sets-bar input[type=search] { flex: 1 1 200px; min-width: 0; }
.img-set { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-md, 12px); background: var(--tint-soft, rgba(255,255,255,.03)); }
.img-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.img-set-head h4 { margin: 0; font-size: 13px; font-weight: 600; text-transform: capitalize; }
.img-set-pager { display: inline-flex; align-items: center; gap: 6px; }
.img-set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.img-set-grid.is-wallpaper { max-width: 640px; }
.img-choice { padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--bg-base, #111); cursor: pointer;
              overflow: hidden; aspect-ratio: 1; transition: border-color .15s, transform .15s; }
.img-set-grid.is-wallpaper .img-choice { aspect-ratio: 16 / 9; }
.img-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-choice:hover { border-color: var(--border-hairline); transform: translateY(-1px); }
.img-choice.is-current, .img-choice-none.is-current { border-color: var(--accent, #ce422b); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #ce422b) 35%, transparent); }


/* 18 and over (migration 015): the sign-up tick, and the bar for members who joined before it */
.adult-tick { display: flex !important; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.4; color: var(--text-main); cursor: pointer; }
.adult-tick input[type="checkbox"] { width: 16px !important; height: 16px; min-width: 16px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.adult-tick a { color: var(--accent-bright); }
.adult-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px;
             padding: 9px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--bg-panel); }
.adult-bar .adult-tick { flex: 1 1 260px; }


/* ---------- Work & union (2.28.0): Edit Profile tab, sign-up, the About tab, Admin lists ---------- */
.wk-head { margin: 18px 0 8px; font-size: 15px; }
.wk-head small { color: var(--text-muted); font-weight: 400; }
.wk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; margin-bottom: 6px;
  border: 1px solid var(--border-hairline); border-radius: 12px; background: var(--bg-panel); }
.wk-row.wk-add { border-style: dashed; }
.wk-row .profile-input { width: auto; min-width: 0; flex: 0 1 auto; }
.wk-row select.profile-input { max-width: 15em; }
.wk-num { width: 6.5em !important; }
.wk-vis { max-width: 8.5em; }
.wk-prim { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.wk-note { flex-basis: 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--accent-bright); }
.wk-fields { margin-top: 6px; }
.wk-field { display: grid; grid-template-columns: minmax(8em, 12em) minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; margin-bottom: 10px; }
.wk-field > small { grid-column: 2 / -1; }
.wk-multi { display: flex; flex-wrap: wrap; gap: 4px 12px; }
@media (max-width: 640px) { .wk-field { grid-template-columns: minmax(0, 1fr) auto; } .wk-field > label { grid-column: 1 / -1; } .wk-field > small { grid-column: 1 / -1; } }
.su-work { border: 1px solid var(--border-hairline); border-radius: 12px; padding: 8px 10px; margin: 4px 0; display: flex; flex-direction: column; gap: 6px;
  min-width: 0; max-width: 100%; box-sizing: border-box; }
.su-work .profile-input { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
.su-work legend { font-size: 13px; padding: 0 4px; }
.su-work legend small, .su-work > small { color: var(--text-muted); }
.su-row { display: flex; gap: 6px; }
.su-row .profile-input { width: auto; }
.su-row select { flex: 1 1 55%; min-width: 0; }
.su-row input { flex: 1 1 45%; min-width: 0; }
.su-multi { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.wk-about { margin-top: 14px; }
.wk-about h4 { margin: 12px 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.wk-about ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wk-about li strong { color: var(--text-main); }
.wk-about .wk-me { font-size: 11.5px; color: var(--text-muted); border: 1px solid var(--border-hairline); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.wk-admin table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wk-admin th, .wk-admin td { padding: 5px 6px; border-bottom: 1px solid var(--border-hairline); text-align: left; vertical-align: middle; }
.wk-admin td .profile-input { width: 100%; min-width: 0; }
.wk-admin .wk-sort { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.wk-admin details { margin: 12px 0; border: 1px solid var(--border-hairline); border-radius: 12px; padding: 8px 12px; }
.wk-admin summary { cursor: pointer; font-weight: 600; }

/* 2.29.0: the verified check, the rep's list, the admin's email check */
.vfd-check { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; margin-left: .3em; border-radius: 50%;
  font-size: .78em; font-weight: 800; line-height: 1; vertical-align: .1em; color: var(--on-accent, #111); background: var(--accent-bright); cursor: help; }
.wk-verify-box { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--border-hairline); }
.wk-vrow { gap: 8px 10px; }
.wk-vname { font-weight: 700; }
.wk-vtrade { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 2px 8px; border: 1px solid var(--border-hairline); border-radius: 999px; }
.wk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.wk-tools .profile-input { width: auto; flex: 1 1 14em; }
.wk-check { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 22em; }
.wk-check .profile-input { flex: 1 1 14em; width: auto; }
.wk-match.is-yes { color: var(--success, #3fae5a); }
.wk-match.is-no { color: var(--danger, #d0533b); }

/* 2.57.0: sign-up through a member's invite link, and the bot check (fragments/signup_extra.html) */
.su-invited { margin: 2px 0 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent-bright, #6aa0ff) 14%, transparent); font-size: 1rem; line-height: 1.4; }
.su-invited.su-gone { background: color-mix(in srgb, var(--danger, #c0392b) 12%, transparent); }
.su-bot { margin: 4px 0; min-height: 65px; }

/* 2.66.0: Settings & privacy → Text size (users.text_size → <html data-ts>): the whole site bigger for that member,
   menus and buttons too, like a phone's own zoom. AptoCalc's keypad has its own sizes (A− A+), so its full-screen
   view is left alone. */
html[data-ts="1"] body:not(.calc-full):not(.calc-embed) { zoom: 1.12; }
html[data-ts="2"] body:not(.calc-full):not(.calc-embed) { zoom: 1.25; }
html[data-ts="3"] body:not(.calc-full):not(.calc-embed) { zoom: 1.4; }

/* 2.67.0: pictures in chat (app/chatmedia798.py): the thumbnails in a message, and what's left when one is archived or gone */
.chat-text .chat-photos { grid-template-columns: repeat(2, minmax(0, 150px)); max-width: 306px; gap: 4px; margin: 4px 0 2px; }
.chat-text .chat-photos .ph-thumb { aspect-ratio: 1 / 1; border-radius: 8px; }
.chat-text .chat-photos.is-one { grid-template-columns: minmax(0, 260px); }
.chat-text .chat-photos.is-one .ph-thumb img { max-height: 260px; }
.chat-text .chat-caption { margin-bottom: 2px; }
.chat-gone { display: inline-block; font-style: italic; color: var(--text-muted); font-size: 0.95em; padding: 4px 0; margin-right: 8px; }
.chat-pics { margin: 4px 0; }
.chat-pics .ph-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-input .chat-rec [data-record], .chat-pics .ph-add { font-size: 0.95rem; padding: 6px 14px; min-height: 36px; }   /* 2.67.0: one size for 📷 🎙 🎬 */

/* 2.71.0: Sign in / Join where a member's bell and name sit (visitors), and maintenance mode's bar (base.html) */
.guest-right { gap: 8px; }
.guest-right .btn { font-size: 16px; padding: 8px 16px; white-space: nowrap; }
.maint-bar { margin: 0; padding: 10px 16px; text-align: center; font-size: 17px; line-height: 1.4;
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-panel)); color: var(--text-main); border-bottom: 1px solid var(--accent); }
.maint-bar a { color: var(--accent-bright); }
/* 2.71.0: the Join form's trap box, never seen (fragments/signup_extra.html) */
.su-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* 2.71.1: the sign-up form in a side column: the bot check and the work questions keep to the column's width */
.lb .su-bot { max-width: 100%; overflow: hidden; }
.lb .su-work { min-width: 0; }
.lb .su-row { flex-wrap: wrap; }
.lb .su-row select, .lb .su-row input { flex: 1 1 120px; }
/* 2.76.0: your own profile's tab bar with your work tabs (fragments/profile_bar_self.html, static/profile_work.js).
   It wraps instead of scrolling sideways. 2.79.0: no More ▾. */
.tab-bar.prof-bar { flex-wrap: wrap; overflow: visible; align-items: flex-end; gap: 2px; }
.prof-bar > .tab-btn { font-size: 14px; padding: 10px 14px; }   /* one size for every tab here, big enough to read */
.prof-work.jl { max-width: none; margin: 0; }
.prof-work .jl-in { padding: 6px 0 0; }

/* 2.71.1/2.71.2 (owner, 31 Oct: the Join form spilled over AptoCalc; "the login block should stay on every page"): on a
   computer, a left column holding the sign-in block is wide enough for it and the Join form, on whatever page; on
   phones the column is the menu drawer as before. Members never have the block, so their column stays 220px. */
@media (min-width: 861px) {
  .col-left:has(#sign-in) { width: 300px; }
}

/* 2.71.3: Your town on a profile's About (Settings & privacy → Your town picks what shows and to whom) */
.prof-town { margin: 0 0 10px; font-weight: 600; }

/* 2.71.4: with the sign-in block on the page, the header's Sign in shows on phones only (it opens the menu drawer at
   the block); on a computer the block is right there. */
.guest-right.guest-phone-only { display: none; }
@media (max-width: 860px), (max-height: 520px) and (orientation: landscape) {
  .guest-right.guest-phone-only { display: flex; }
}
/* the block's Join: a full-width button (it opens the Join form under it) */
.lb-invite > summary.lb-join { display: block; width: 100%; box-sizing: border-box; margin: 8px 0 0; padding: 9px 14px;
  text-align: center; font-size: 16px; font-weight: 700; list-style: none; border-radius: 999px; cursor: pointer;
  color: var(--accent-bright, var(--accent)); border: 2px solid var(--accent); background: transparent; }
.lb-invite > summary.lb-join::-webkit-details-marker { display: none; }
.lb-invite > summary.lb-join:hover, .lb-invite > summary.lb-join:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lb-invite[open] > summary.lb-join { margin-bottom: 10px; }

/* 2.73.0: badges and ranks, one short line under a name (app/badges798.py). Never wraps: cut off with "…". */
.bd-line { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 1px 0 2px; }
.bd { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; max-width: 12em; }
.bd-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd.bd-fill { background: var(--bd); color: var(--bd-ink); border-radius: 999px; padding: 0 7px; font-weight: 600; }
.bd-pic { height: 18px; width: auto; max-width: 48px; object-fit: contain; vertical-align: middle; }
.bd-ok { font-size: 11px; font-weight: 700; color: var(--success, #3fb950); }
.bd.bd-fill .bd-ok { color: inherit; }
.bd-sep { margin: 0 5px; opacity: .7; }
.fp-author .bd-line { white-space: normal; }
.fp-author .bd-sep { display: none; }
.fp-author .bd { display: flex; margin-top: 3px; max-width: 100%; }
.wk-bd { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 4px 0 14px; }
.wk-bd-q { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
@media (max-width: 700px) {
  .fp-author .bd-line { white-space: nowrap; }
  .fp-author .bd-sep { display: inline; }
  .fp-author .bd { display: inline-flex; margin-top: 0; max-width: 12em; }
}
#bd-admin .bd-row, #bd-admin .bd-find, #bd-admin .bd-give, #bd-admin .bd-pic-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#bd-admin .bd-row .profile-input, #bd-admin .bd-find .profile-input, #bd-admin .bd-give .profile-input { width: auto; max-width: 14em; }
#bd-admin .bd-n { width: 7em; }
#bd-admin .bd-when[hidden], #bd-admin .bd-n[hidden] { display: none; }
#bd-admin .bd-table td { vertical-align: middle; }
#bd-admin .bd-table .bd-line { max-width: 220px; }
#bd-admin .bd-ranks { list-style: none; padding: 0; margin: 0; }
#bd-admin .bd-rank-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
#bd-admin .bd-rank-head .bd-line { display: inline-block; max-width: 260px; }
#bd-admin .bd-move { margin-left: auto; display: inline-flex; gap: 4px; }
#bd-admin .bd-hand { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
#bd-admin .bd-holder { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 8px; border: 1px solid var(--border-hairline); border-radius: 999px; }
#bd-admin .bd-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-author .bd { width: fit-content; }

/* 2.79.0: My local, a folded box on your own About (fragments/my_local.html; the papers moved here from the work tabs) */
.my-local { margin: 16px 0 8px; border: 1px solid var(--border-hairline); border-radius: 12px; background: var(--bg-panel); }
.my-local > summary { cursor: pointer; padding: 12px 16px; font-size: 17px; font-weight: 700; list-style-position: inside; }
.my-local[open] > summary { border-bottom: 1px solid var(--border-hairline); }
.my-local > p, .my-local > .jl-doc { margin-left: 14px; margin-right: 14px; }
.my-local > p { margin-top: 12px; }
.jl-doc { padding: 14px 16px; margin: 0 0 14px; border: 1px solid var(--border-hairline); border-radius: 14px; background: var(--bg-base); font-size: 16px; line-height: 1.55; }
.jl-doc-h { margin: 0; font-size: 19px; }
.jl-doc-dates { margin: 2px 0 8px; }
.jl-doc-list { padding-left: 20px; margin: 6px 0; }
.jl-doc-list li { margin: 0 0 6px; }
.jl-doc-link { min-height: 46px; display: inline-flex; align-items: center; font-size: 16px; }

/* 2.80.0: Admin → Community → Pipeline News Feed (templates/admin/news.html) */
.news-admin .news-lead { max-width: 900px; font-size: 14px; line-height: 1.5; }
.news-box { margin: 12px 0; border: 1px solid var(--border-hairline); border-radius: 10px; padding: 8px 12px; }
.news-box > summary { cursor: pointer; padding: 4px 0; }
.news-set, .news-form { display: grid; gap: 10px; max-width: 640px; margin: 10px 0; }
.news-set label, .news-form label { display: flex; flex-direction: column; gap: 4px; }
.news-set label > span { font-weight: 600; }
.news-h { margin: 18px 0 6px; }
.news-url { overflow-wrap: anywhere; font-size: 12px; }
.news-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.news-btns form { margin: 0; }
.news-feeds tr.news-off td { opacity: .65; }
.news-find { margin: 6px 0; max-width: 360px; }

/* 2.84.0: the band over the full AptoCalc while it's free to visitors (fragments/calc_free_band.html) */
.calc-free-band { background: var(--accent); color: var(--on-accent, #111); border-radius: 12px; padding: 14px 18px; margin: 0 0 14px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.calc-free-band .cfb-say { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.35; }
.calc-free-band .cfb-tag { display: inline-block; background: rgba(0,0,0,.18); border-radius: 6px; padding: 1px 8px; margin-right: 4px; text-transform: uppercase; font-size: 14px; letter-spacing: .05em; vertical-align: 2px; }
.calc-free-band .cfb-foot { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.calc-free-band .cfb-foot a.cfb-join.cfb-join { color: inherit; text-decoration: underline; }   /* beats design.css's .col-center link colour */
@media (max-width: 640px) { .calc-free-band { padding: 12px 12px; } .calc-free-band .cfb-say { font-size: 18px; } }