/* ── Design tokens ─────────────────────────────────────────── */
/* ── Mobile foundation: fluid media reset (prevents horizontal overflow on
 * small viewports). Element-level / low specificity so component sizing wins. */
img, picture, video, canvas { max-width: 100%; height: auto; }
svg, iframe { max-width: 100%; }
body { overflow-wrap: break-word; }

/* ── Accessibility: honor OS "reduce motion" (Batch 6). Near-instant
 * animations/transitions + no smooth-scroll for users who request it. ────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Arabic / RTL typography (Batch 7): Arabic is cursive, so letter-spacing
 * breaks letter-joining; reset it and give Arabic body text more leading. ─── */
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] body { line-height: 1.7; }

:root, [data-theme="dark"] {
    --bg-base:    #0e1014;
    --bg-card:    #141619;
    --bg-surface: #191c21;
    --bg-deep:    #090b0e;
    --accent: #cda12c;
    --accent-hover:  #ffd35e;
    --accent-active: #b8862a;
    --accent-dim: rgba(255,199,60,0.10);
    --text-primary:   #e8eaf0;
    --text-secondary: #b3bccb;       /* was #7a8ba0 — lifted for AA on bg-card */
    --text-muted:     #8a99af;       /* was #4a5568 — passes 4.5:1 on bg-surface */
    --border:         rgba(255,255,255,0.08);
    --border-hover:   rgba(255,255,255,0.16);
    --overlay-soft:   rgba(255,255,255,.04);
    --overlay-hover:  rgba(255,255,255,.08);
    --overlay-medium: rgba(255,255,255,.15);
    --overlay-strong: rgba(255,255,255,.25);
    --success:  #1D9E75;
    --danger: #d05a5a;  /* lifted from #b23e3d — meets 4.5:1 on --bg-card */
    --info:   #5a9eed;
    --radius-sm:   8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-pill: 9999px;
    /* spacing — 4px base */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;
    /* type */
    --fs-xs: 11px;  --fs-sm: 13px;  --fs-md: 14px;  --fs-lg: 16px;
    --fs-xl: 18px;  --fs-2xl: 22px; --fs-3xl: 36px;
    --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;
    /* elevation */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.30);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.40);
    /* motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .15s; --dur-med: .25s; --dur-slow: .4s;
    /* category palette */
    --cat-architecture-fg:#c89de0; --cat-architecture-bg:rgba(241,188,255,.12); --cat-architecture-bg-strong:rgba(241,188,255,.22);
    --cat-books-fg:       #7dd6ce; --cat-books-bg:       rgba(169,238,233,.12); --cat-books-bg-strong:       rgba(169,238,233,.22);
    --cat-software-fg:    #b8d46e; --cat-software-bg:    rgba(236,255,164,.12); --cat-software-bg-strong:    rgba(236,255,164,.22);
    --cat-learn-fg:       #d4a06e; --cat-learn-bg:       rgba(255,220,166,.12); --cat-learn-bg-strong:       rgba(255,220,166,.22);
    --cat-thesis-fg:      #f08bb6; --cat-thesis-bg:      rgba(250,170,200,.12); --cat-thesis-bg-strong:      rgba(250,170,200,.22);
    /* a11y focus ring */
    --focus-ring:   2px solid var(--accent);
    --focus-offset: 2px;
    /* network-mesh canvas — segment colour as an `R, G, B` tuple so the JS
     * can wrap it in rgba(…) with its own alpha. Gold in dark theme; the
     * light-theme override below uses bg-base. */
    --mesh-rgb: 255, 199, 60;
    --mesh-alpha-mult: 1;
}

/* Light theme (#45) — token-only swap; everything that uses var(--…) follows. */
[data-theme="light"] {
    --bg-base:    #f5f6f8;
    --bg-card:    #ffffff;
    --bg-surface: #eef0f4;
    --bg-deep:    #1a2436;
    /* mesh segments: desaturated grey-blue so the lines don't compete
     * with content on the white canvas — was navy 26,36,54 (too vivid). */
    --mesh-rgb: 100, 110, 125;
    --mesh-alpha-mult: 0.4;
    --accent:        #b8862a;
    --accent-hover:  #d6a13a;
    --accent-active: #966a1f;
    --accent-dim:    rgba(184,134,42,0.10);
    --text-primary:   #1a2436;
    --text-secondary: #3b475a;       /* was #4a5568 — kept dark for body copy */
    --text-muted:     #5b6878;       /* was #7a8ba0 — lifted for AA on white */
    --border:         rgba(0,0,0,0.08);
    --border-hover:   rgba(0,0,0,0.16);
    --overlay-soft:   rgba(0,0,0,.04);
    --overlay-hover:  rgba(0,0,0,.08);
    --overlay-medium: rgba(0,0,0,.12);
    --overlay-strong: rgba(0,0,0,.20);
    --success:  #15a373;
    --danger:   #c0413f;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.14);
}

/* ── Themed scrollbars (project-wide) ─────────────────────────
 * Firefox uses scrollbar-color/-width on the document; WebKit/Chromium
 * uses ::-webkit-scrollbar pseudo-elements. We theme both so any scrolling
 * surface (modal body, chat list, popovers, code blocks) reads on-brand.
 * The thumb picks up --accent-dim on hover so it lights up gold on touch. */
* { scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color .15s;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
    border: 2px solid transparent;
}
::-webkit-scrollbar-corner { background: transparent; }
/* Slim variant for compact areas (chat panels, dropdowns).
 * Add class="thin-scroll" to opt in. */
.thin-scroll { scrollbar-width: thin; }
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }

/* ── Accessibility: global focus-visible ring + reduced motion ── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration:  0ms !important;
        scroll-behavior: auto !important;
    }
    .post-card:hover, .group-list-card:hover, .pillar-card:hover,
    .project-like-form-container:hover, .project-dislike-form-container:hover,
    .project-views-counter:hover, .project-private-toggle:hover,
    .project-reports-counter:hover { transform: none; }
}

/* Theme toggle button (#45) */
.theme-toggle{background:transparent;border:1px solid var(--border);color:var(--text-secondary);width:36px;height:36px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s}
.theme-toggle:hover{border-color:var(--border-hover);color:var(--accent)}
[data-theme="dark"] .theme-icon-light,
[data-theme="light"] .theme-icon-dark{display:none}

/* ── Gold card borders (dark theme default) ───────────────────────
   Resting border gets a warm gold tint so card edges read against
   the near-black background. Hover already uses explicit rgba gold
   values. The blue-accent rules in accent-blue.css have higher
   specificity and override these automatically. */
[data-theme="dark"] .post-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .job-card,
[data-theme="dark"] .group-card,
[data-theme="dark"] .office-card,
[data-theme="dark"] .matched-user-card,
[data-theme="dark"] .suggested-user-card,
[data-theme="dark"] .suggested-users-panel,
[data-theme="dark"] .profile-people-card,
[data-theme="dark"] .user-project-card{border-color:rgba(205,161,44,.22)}


/* ── Q&A nav button ──────────────────────────────────────────────── */
.nav-qa-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:transparent;border:1px solid transparent;
  color:var(--text-muted);font-size:17px;
  text-decoration:none;
  transition:background .14s,color .14s,border-color .14s;
}
.nav-qa-btn:hover,.nav-qa-btn.is-active{
  background:rgba(96,165,250,.12);
  color:#60a5fa;
  border-color:rgba(96,165,250,.30);
}

/* ── Utility capsule — theme + language grouped pill ─────────────── */
.nav-util-capsule{
  display:inline-flex;align-items:center;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:99px;
  height:40px;padding:0 4px;
}
[data-theme="light"] .nav-util-capsule{background:var(--bg-card);border-color:var(--border-hover)}
/* Shared button reset for both controls inside the capsule */
.nav-util-capsule .theme-toggle,
.nav-util-capsule .lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;border-radius:99px;
  background:transparent;border:none;
  color:var(--text-muted);cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.nav-util-capsule .theme-toggle:hover,
.nav-util-capsule .theme-toggle:focus-visible,
.nav-util-capsule .lang-toggle:hover,
.nav-util-capsule .lang-toggle:focus-visible{
  background:rgba(205,161,44,.10);color:var(--accent);outline:none;
}
.nav-util-capsule .theme-toggle{width:36px;padding:0;font-size:14px}
.nav-util-capsule .lang-toggle{padding:0 12px;font-size:12px;font-weight:600;letter-spacing:.04em}
*{box-sizing:border-box}
body{
    font-family:'Poppins',sans-serif;
    background-color:var(--bg-base)!important;
    color:var(--text-primary)!important;
    display:flex;
    flex-direction:column;
    min-height:100svh;
    min-height:100vh
}
body>.pb-5{flex:1}

.container{
    min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px)
}

a{
    text-decoration:none
}

.errorlist{color:var(--danger);list-style:none;font-weight:600;font-size:13px}

/* ── Modal chrome (global) ───────────────────────────────────
 * Upgrades every Bootstrap modal across the site. Specialized modals
 * (.avatar-edit-content, .delete-account-content, .avatar-preview-content)
 * override these via their own !important rules. */
.modal-content{
  position:relative;
  background:rgba(20,22,25,.88)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:0 32px 72px rgba(0,0,0,.52),0 2px 8px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)!important;
  overflow:hidden;
}
.modal-content::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,161,44,.16) 0%,transparent 65%);
  pointer-events:none;z-index:0;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px 14px!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  position:relative;z-index:2;
}
.modal-header .modal-title,
.modal-title{
  color:var(--accent);font-size:17px;font-weight:700;letter-spacing:.01em;margin:0;
}
.modal-body{
  padding:18px 22px!important;font-size:14px!important;
  color:var(--text-secondary);line-height:1.6;
  position:relative;z-index:2;
}
.modal-footer{
  padding:14px 22px 18px!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  background:rgba(0,0,0,.18);
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  position:relative;z-index:2;
}
/* Close button — drop Bootstrap's SVG background, swap a clean Unicode × */
.btn-close{
  background:transparent!important;background-image:none!important;
  border:1px solid var(--border-hover)!important;
  width:32px;height:32px;border-radius:50%!important;
  margin:0;opacity:1;filter:none;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;color:transparent;
  transition:background .15s,border-color .15s;
}
.btn-close::before{
  content:"\00d7"; /* multiplication sign */
  color:var(--text-secondary);font-size:18px;line-height:1;font-weight:300;
  transition:color .15s;
}
.btn-close:hover{
  background:var(--overlay-soft)!important;
  border-color:var(--overlay-strong)!important;
}
.btn-close:hover::before{color:var(--text-primary)}
.btn-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── arch-modal hero pattern ─────────────────────────────────
 * Reusable bits any modal can opt into for the dramatic "wow" header
 * the avatar/delete modals use. Drop these inside the modal-content
 * (no need for the modal-header) for a centered hero block. */
.arch-modal-hero{
  text-align:center;padding:14px 4px 12px;
  position:relative;z-index:2;
}
.arch-modal-icon{
  width:60px;height:60px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:26px;
  margin:0 auto 12px;
  filter:drop-shadow(0 4px 14px rgba(205,161,44,.40));
}
.arch-modal-icon.is-danger{
  background:rgba(178,62,61,.15);
  color:var(--danger);
  filter:drop-shadow(0 4px 14px rgba(178,62,61,.40));
}
.arch-modal-icon.is-success{
  background:rgba(29,158,117,.15);
  color:var(--success);
  filter:drop-shadow(0 4px 14px rgba(29,158,117,.40));
}
.arch-modal-eyebrow{
  margin:0 0 4px;font-size:11px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.12em;
}
.arch-modal-eyebrow.is-danger{color:var(--danger)}
.arch-modal-eyebrow.is-success{color:var(--success)}
.arch-modal-title{
  margin:0 0 10px;font-size:22px;font-weight:700;color:var(--text-primary);
  letter-spacing:.01em;
}
.arch-modal-body{
  margin:0 auto 18px;font-size:13.5px;color:var(--text-secondary);
  line-height:1.6;max-width:440px;text-align:center;
  position:relative;z-index:2;padding:0 22px;
}
.arch-modal-body.is-start{text-align:start}
.arch-modal-actions{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:0 22px 22px;position:relative;z-index:2;
}
.arch-modal-actions.is-end{justify-content:flex-end}
.arch-modal-close{
  position:absolute;top:14px;inset-inline-end:14px;
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-hover);
  color:var(--text-secondary);font-size:13px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  z-index:5;
}
.arch-modal-close:hover,
.arch-modal-close:focus-visible{
  /* Warning-coloured hover — the X is a destructive affordance (cancel
   * the form / abandon the modal). Pairing it with the site's danger
   * palette makes that read at a glance. Site-wide. */
  color:var(--danger);
  border-color:var(--danger);
  background:rgba(178,62,61,.10);
  box-shadow:0 0 0 3px rgba(178,62,61,.14);
  outline:none;
}
.arch-modal-close:active{transform:scale(.95)}

/* Base gradient for ALL arch-modals — gold tint from top fading to the card
 * floor. The is-X variants below override background+border with their own
 * colour-keyed gradients. */
.arch-modal .modal-content{
  background:linear-gradient(180deg,rgba(205,161,44,.22) 0%,rgba(20,22,25,.92) 52%)!important;
  border:1px solid rgba(205,161,44,.30)!important;
  box-shadow:0 32px 72px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
[data-theme="light"] .arch-modal .modal-content{
  background:linear-gradient(160deg,rgba(205,161,44,.12) 0%,rgba(255,255,255,.85) 48%,rgba(255,252,240,.94) 100%)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  border:1px solid rgba(205,161,44,.26)!important;
  box-shadow:0 24px 64px rgba(205,161,44,.14),0 4px 20px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.95)!important;
}

/* Success-modal treatment (green) — mirrors the danger/warning pattern. */
.arch-modal .modal-content:has(.arch-modal-icon.is-success){
  background:linear-gradient(180deg,rgba(29,158,117,.13) 0%,rgba(20,22,25,.86) 50%)!important;
  border:1px solid rgba(29,158,117,.28)!important;
}
[data-theme="light"] .arch-modal .modal-content:has(.arch-modal-icon.is-success){
  background:linear-gradient(160deg,rgba(29,158,117,.10) 0%,rgba(255,255,255,.80) 44%,rgba(240,255,249,.94) 100%)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  border:1px solid rgba(29,158,117,.22)!important;
  box-shadow:0 24px 64px rgba(29,158,117,.12),0 4px 20px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.arch-modal .modal-content:has(.arch-modal-icon.is-success)::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(29,158,117,.18) 0%,transparent 65%);
  pointer-events:none;z-index:0;
}

/* Warning-modal full-content treatment — matches the Delete-account
 * modal: red gradient fading from the top, thin red border, soft red
 * halo behind the hero icon. Applies to ANY arch-modal whose hero icon
 * carries the is-danger modifier, so flagging the icon flips the whole
 * card without template-by-template duplication. */
.arch-modal .modal-content:has(.arch-modal-icon.is-danger){
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(178,62,61,.26) 0%,rgba(20,22,25,.92) 52%)!important;
  border:1px solid rgba(178,62,61,.38)!important;
}
[data-theme="light"] .arch-modal .modal-content:has(.arch-modal-icon.is-danger){
  background:linear-gradient(160deg,rgba(192,65,63,.10) 0%,rgba(255,255,255,.80) 44%,rgba(248,244,244,.94) 100%)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  border:1px solid rgba(192,65,63,.22)!important;
  box-shadow:0 24px 64px rgba(192,65,63,.14),0 4px 20px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.arch-modal .modal-content:has(.arch-modal-icon.is-danger)::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(178,62,61,.30) 0%,transparent 65%);
  pointer-events:none;
  z-index:0;
}
[data-theme="light"] .arch-modal .modal-content:has(.arch-modal-icon.is-danger)::before{
  background:radial-gradient(circle,rgba(192,65,63,.38) 0%,transparent 58%);
}
/* A modal must never overflow the viewport unscrollably. Cap the height and
 * scroll the body of the card — this also OVERRIDES the danger modal's
 * overflow:hidden (which exists only to clip the glow halo). overflow-x stays
 * hidden so the halo is still clipped sideways; overscroll-behavior:contain
 * stops the scroll from chaining to the page behind (the "page scrolls instead
 * of the modal" bug on mobile). Only bites when content exceeds the cap, i.e.
 * on short / mobile viewports — desktop modals that already fit are untouched. */
.arch-modal .modal-content,
.arch-modal .modal-content:has(.arch-modal-icon.is-danger){
  max-height:90vh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
/* Keep the floating back-to-top button behind an open modal, never over it. */
body.modal-open .back-to-top{display:none!important}
.arch-modal-icon.is-warning{
  background:rgba(205,161,44,.15);
  color:var(--accent);
  filter:drop-shadow(0 4px 14px rgba(205,161,44,.40));
}
.arch-modal-eyebrow.is-warning{color:var(--accent)}
.arch-modal .modal-content:has(.arch-modal-icon.is-warning){
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(205,161,44,.24) 0%,rgba(20,22,25,.92) 52%)!important;
  border:1px solid rgba(205,161,44,.36)!important;
}
[data-theme="light"] .arch-modal .modal-content:has(.arch-modal-icon.is-warning){
  background:linear-gradient(160deg,rgba(205,161,44,.10) 0%,rgba(255,255,255,.80) 44%,rgba(255,252,240,.94) 100%)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  border:1px solid rgba(205,161,44,.22)!important;
  box-shadow:0 24px 64px rgba(205,161,44,.14),0 4px 20px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.arch-modal .modal-content:has(.arch-modal-icon.is-warning)::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,161,44,.28) 0%,transparent 65%);
  pointer-events:none;
  z-index:0;
}
[data-theme="light"] .arch-modal .modal-content:has(.arch-modal-icon.is-warning)::before{
  background:radial-gradient(circle,rgba(205,161,44,.38) 0%,transparent 58%);
}

/* reactions */
.like-color{color:var(--success)!important}
.dislike-color{color:var(--danger)!important}
.nat-color{color:var(--text-muted)!important}

/* All app-action buttons share the same 40px height + inline-flex centering.
 * Per-class rules below tweak the colors / borders / glow. */

/* primary (gold fill) */
.arch-btn-primary,
.arch-btn-yellow{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:40px;padding:0 20px;line-height:1;
    background-color:var(--accent);
    color:var(--bg-deep)!important;
    font-weight:700;
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:opacity .15s,background-color .15s
}
.arch-btn-primary:hover,
.arch-btn-yellow:hover{
    opacity:.85;
    background-color: #9e834f;
}

/* danger (solid red) */
.arch-btn-danger{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:40px;padding:0 20px;line-height:1;
    background-color:var(--danger);
    color:var(--bg-deep)!important;
    font-weight:700;
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:opacity .15s,background-color .15s
}
.arch-btn-danger:hover{
    opacity:.85;
    background-color: #9e584f;
}

/* ghost. Subtle neutral underglow at rest, calmer neutral hover (text-primary,
 * brighter border, soft white wash). The resting state borrows the gold
 * base-glow from main_btn (.arch-cta) so the four approved buttons share
 * the same idle silhouette; hover behaviour stays in the ghost's own
 * neutral family (white wash, no gold). */
.arch-btn-ghost,.arch-btn-deep-blue,.arch-btn-pur,.arch-btn-gray,.arch-btn-space{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 20px;line-height:1;
  background-color:transparent;color:var(--text-secondary)!important;
  border:1px solid var(--border-hover);border-radius:var(--radius-sm);
  cursor:pointer;font-weight:500;font-size:13px;
  box-shadow:0 0 0 0 rgba(205,161,44,0),0 1px 6px rgba(205,161,44,.18);
  transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease);
}
.arch-btn-ghost:hover,.arch-btn-deep-blue:hover,.arch-btn-pur:hover,.arch-btn-gray:hover,.arch-btn-space:hover{
  color:var(--text-primary)!important;
  border-color:var(--overlay-strong);
  background-color:var(--overlay-soft);
  box-shadow:0 0 0 3px var(--overlay-soft),0 4px 12px rgba(0,0,0,.24);
  transform:translateY(-1px);
}
.arch-btn-ghost:active,.arch-btn-deep-blue:active,.arch-btn-pur:active,.arch-btn-gray:active,.arch-btn-space:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,.18)}

/* red outline — same glow shape as the CTA pill but tinted with --danger. */
.arch-btn-red{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 20px;line-height:1;
  background-color:transparent;color:var(--danger)!important;
  border:1px solid rgba(208,90,90,.45);border-radius:var(--radius-sm);
  cursor:pointer;font-weight:600;font-size:13px;
  box-shadow:0 0 0 0 rgba(208,90,90,0),0 1px 6px rgba(208,90,90,.16);
  transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease);
}
.arch-btn-red:hover{
  border-color:var(--danger);
  background-color:rgba(208,90,90,.10);
  box-shadow:0 0 0 3px rgba(208,90,90,.14),0 4px 12px rgba(208,90,90,.30);
  transform:translateY(-1px);
}
.arch-btn-red:active{transform:translateY(0);box-shadow:0 1px 6px rgba(208,90,90,.22)}

/* green outline — symmetric red treatment in success-green. */
.arch-btn-green{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 20px;line-height:1;
  background-color:transparent;color:var(--success)!important;
  border:1px solid rgba(29,158,117,.45);border-radius:var(--radius-sm);
  cursor:pointer;font-weight:600;
  box-shadow:0 0 0 0 rgba(29,158,117,0),0 1px 6px rgba(29,158,117,.14);
  transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease);
}
.arch-btn-green:hover{
  border-color:var(--success);
  background-color:rgba(29,158,117,.10);
  box-shadow:0 0 0 3px rgba(29,158,117,.12),0 4px 12px rgba(29,158,117,.26);
  transform:translateY(-1px);
}
.arch-btn-green:active{transform:translateY(0);box-shadow:0 1px 6px rgba(29,158,117,.20)}

/* OK button — green twin of .arch-cta (main_btn). Same shape & glow as
 * the gold "Edit profile" CTA, just tinted in success-green. Used for
 * positive confirmations: Approve, Accept, Confirm, Save. */
.arch-btn-ok{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 18px;border-radius:var(--radius-sm);
  background:rgba(29,158,117,.10);
  color:var(--success)!important;
  font-weight:600;font-size:13px;letter-spacing:.02em;
  text-decoration:none;
  border:1px solid rgba(29,158,117,.45);
  box-shadow:0 0 0 0 rgba(29,158,117,0),0 1px 6px rgba(29,158,117,.18);
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.arch-btn-ok i{font-size:11px;line-height:1}
.arch-btn-ok:hover{
  background:var(--success);
  color:#fff!important;
  border-color:var(--success);
  box-shadow:0 0 0 3px rgba(29,158,117,.16),0 4px 12px rgba(29,158,117,.32);
  transform:translateY(-1px);
}
.arch-btn-ok:active{transform:translateY(0);box-shadow:0 1px 6px rgba(29,158,117,.22)}
.arch-btn-ok:disabled,.arch-btn-ok[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}

/* alerts */
.error-message{margin:20px auto;border-radius:var(--radius-md);font-size:14px;font-weight:600;text-align:center;width:80%;padding:16px;background-color:rgba(226,75,74,.10);color:#ff8080;border:1px solid rgba(226,75,74,.25)}
.error-message li{list-style:none}
.success-message{margin:20px auto;border-radius:var(--radius-md);font-size:14px;font-weight:600;text-align:center;width:80%;padding:16px;background-color:rgba(29,158,117,.10);color:#5de0b5;border:1px solid rgba(29,158,117,.25)}

/* navbar — frosted glass */
.navbar{
  background-color:rgba(12,18,25,.72)!important;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
             0 1px 24px rgba(0,0,0,.20);
  padding:0 24px!important;min-height:54px;
  /* sticky + high z-index: popovers paint above any page content,
   * and content scrolls visibly beneath the glass as the user moves. */
  position:sticky;top:0;z-index:1100;
}
[data-theme="light"] .navbar{
  background-color:rgba(245,246,248,.82)!important;
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             0 1px 16px rgba(0,0,0,.06);
}
.nav-item a{color:var(--text-muted)!important;font-size:13.5px;font-weight:500;padding:6px 11px!important;border-radius:var(--radius-sm);transition:color .15s,background .15s}
.nav-item a:hover{color:var(--text-secondary)!important;background-color:var(--overlay-soft)}
.navbar-active-item{color:var(--accent)!important;background-color:var(--accent-dim)!important;border-radius:var(--radius-sm)}
/* ── User avatar pill — hero-language treatment to match arch-form-shell:
 * gold-tinted gradient face, inset highlight, hairline border, backdrop
 * blur, soft accent halo on hover. The avatar sits in a circular gold-ring
 * tile inset 4px inside the pill so it reads as a "framed" portrait. */
.user-avatar{
  display:inline-flex;align-items:center;gap:0;
  text-decoration:none!important;color:var(--text-primary)!important;
  background:var(--bg-surface);
  border:1px solid rgba(255,255,255,.10);
  /* Match the logout button (arch-btn-ghost) corners — 8px instead of
   * a fully circular pill so the pair reads as one button group. */
  border-radius:var(--radius-sm);
  padding:3px 14px 3px 4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 8px rgba(0,0,0,.18);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),
             background .25s var(--ease),transform .25s var(--ease);
}
.user-avatar:hover,.user-avatar:focus-visible{
  border-color:rgba(205,161,44,.55);
  background:var(--bg-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 8px 22px rgba(0,0,0,.30),
             0 0 0 3px rgba(205,161,44,.14);
  transform:translateY(-1px);
  outline:none;
}
.user-avatar:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 8px rgba(0,0,0,.18)}
.user-avatar-img{
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(205,161,44,.45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.25);
  display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
  transition:border-color .2s var(--ease),transform .35s var(--ease),box-shadow .25s var(--ease);
}
.user-avatar:hover .user-avatar-img,
.user-avatar:focus-visible .user-avatar-img{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),
             0 4px 12px rgba(205,161,44,.30),
             0 0 0 2px rgba(205,161,44,.18);
  transform:scale(1.04);
}
.user-avatar-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:50%;
}
.user-avatar-name{
  font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--text-primary);
  margin-left:9px;line-height:1;
  white-space:nowrap;
  transition:color .2s var(--ease);
}
.user-avatar:hover .user-avatar-name,
.user-avatar:focus-visible .user-avatar-name{color:var(--accent)}
[dir="rtl"] .user-avatar{padding:3px 4px 3px 14px}
[dir="rtl"] .user-avatar-name{margin-left:0;margin-right:9px}
[data-theme="light"] .user-avatar{
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.06);
}
[data-theme="light"] .user-avatar:hover,
[data-theme="light"] .user-avatar:focus-visible{
  background:rgba(0,0,0,.04);
  border-color:rgba(184,134,42,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
             0 8px 22px rgba(0,0,0,.10),
             0 0 0 3px rgba(184,134,42,.14);
}
.navbar-search{
  position:relative;
  display:inline-flex;align-items:center;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:99px;
  height:40px;
  /* UR-02 — floor the width so the busier Arabic navbar can't squeeze the field
     below its icon+kbd padding (placeholder colliding with the magnifier). */
  min-width:210px;
  transition:border-color .14s var(--ease);
}
.navbar-search:focus-within{border-color:rgba(205,161,44,.35)}
[data-theme="light"] .navbar-search{background:var(--bg-card);border-color:var(--border-hover)}
[data-theme="light"] .navbar-search:focus-within{border-color:rgba(184,134,42,.45)}
.navbar-search-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text-muted);font-size:13px;
  cursor:pointer;padding:0;z-index:2;
  transition:color .14s var(--ease);
}
.navbar-search-icon:hover,
.navbar-search:focus-within .navbar-search-icon{color:var(--accent)}
.navbar-search-icon:focus-visible{outline:none;color:var(--accent)}
.navbar-search input{
  background:transparent!important;
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
  color:var(--text-primary)!important;
  border-radius:99px!important;
  font-size:13px;
  padding:0 46px 0 34px!important;
  /* UR-02 — fill the (now min-width-floored) container instead of a fixed 220px
     that overflowed/collided when the flex row squeezed it. */
  height:100%;width:100%;min-width:0;
}
.navbar-search input:focus{background:transparent!important;border:none!important;box-shadow:none!important}
.navbar-search input::placeholder{color:var(--text-muted)!important}
[dir="rtl"] .navbar-search-icon{left:auto;right:12px}
[dir="rtl"] .navbar-search input{padding-left:46px!important;padding-right:34px!important}

/* Notification bell (#51) — matches user-avatar pill's hero treatment so
 * the trio (bell · user · logout) reads as one family. */
.navbar-bell{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--bg-surface);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text-secondary);text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 8px rgba(0,0,0,.18);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),
             background .25s var(--ease),color .15s var(--ease),transform .25s var(--ease);
}
.navbar-bell:hover,.navbar-bell:focus-visible{
  border-color:rgba(205,161,44,.55);
  background:var(--bg-surface);
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 8px 22px rgba(0,0,0,.30),
             0 0 0 3px rgba(205,161,44,.14);
  transform:translateY(-1px);
  outline:none;
}
[data-theme="light"] .navbar-bell{
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.06);
}
[data-theme="light"] .navbar-bell:hover,
[data-theme="light"] .navbar-bell:focus-visible{
  background:rgba(0,0,0,.04);
  border-color:rgba(184,134,42,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
             0 8px 22px rgba(0,0,0,.10),
             0 0 0 3px rgba(184,134,42,.14);
}
.navbar-bell-badge{
  position:absolute;top:-3px;right:-3px;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;
  background:var(--accent);
  color:#0a0d12;
  font-size:10px;font-weight:800;line-height:16px;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  letter-spacing:.01em;
  text-align:center;
  border:1.5px solid var(--bg-base, #0f1115);
  pointer-events:none;
}
[dir="rtl"] .navbar-bell-badge{right:auto;left:-3px}

/* Bell-as-button (was always <a>); reset native button chrome so the
 * shared .navbar-bell styles apply identically to either element. */
button.navbar-bell{font:inherit;cursor:pointer}
button.navbar-bell:focus{outline:none}

/* ── Nav capsule — unified frosted-glass pill (messages + notifications + user) ─ */
.nav-capsule{
  display:inline-flex;align-items:center;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:99px;
  height:40px;padding:0 4px;
  /* overflow stays visible — absolutely-positioned popovers and badges
   * must escape the capsule bounds without being clipped */
}
[data-theme="light"] .nav-capsule{background:var(--bg-card);border-color:var(--border-hover)}
.nav-capsule-sep{
  width:1px;height:18px;background:var(--border);flex-shrink:0;margin:0 2px;
}
.nav-capsule-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:32px;border-radius:99px;
  background:transparent;border:none;
  color:var(--text-muted);font-size:15px;
  cursor:pointer;padding:0;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.nav-capsule-btn:hover,.nav-capsule-btn:focus-visible{
  background:rgba(205,161,44,.10);color:var(--accent);outline:none;
}
.nav-capsule-user-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:0 10px 0 5px;height:32px;border-radius:99px;
  background:transparent;border:none;cursor:pointer;
  color:var(--text-primary);font:inherit;
  transition:background .14s var(--ease);
}
.nav-capsule-user-btn:hover,.nav-capsule-user-btn:focus-visible{
  background:rgba(205,161,44,.10);outline:none;
}
.nav-capsule-avatar{
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(205,161,44,.50);
  overflow:hidden;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.15);
}
.nav-capsule-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
.nav-capsule-name{
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:var(--text-primary);white-space:nowrap;line-height:1;
}
.nav-capsule-chevron{
  font-size:9px;color:var(--text-muted);
  transition:transform .15s var(--ease);flex-shrink:0;
}
[data-nav-popover][data-open="true"] .nav-capsule-chevron{transform:rotate(180deg)}
.nav-capsule-user-popover.nav-popover{width:176px}
.nav-capsule-user-link{
  display:flex;align-items:center;gap:9px;
  padding:10px 16px;font-size:13.5px;
  color:var(--text-secondary);text-decoration:none;
  transition:background .12s,color .12s;
  position:relative;z-index:2;
}
.nav-capsule-user-link:hover{background:var(--overlay-soft);color:var(--text-primary)}
.nav-capsule-user-link i{width:14px;text-align:center;opacity:.75}
[dir="rtl"] .nav-capsule-user-btn{padding:0 5px 0 10px}
[dir="rtl"] .nav-capsule-name{letter-spacing:0}

/* ── Navbar popover (bell + envelope dropdowns) ─────────────────────
 * .nav-popover-wrap is the positioning anchor; .nav-popover is the
 * panel itself, anchored top-right under the trigger, hidden by the
 * `hidden` attribute and revealed by JS adding [data-open="true"] on
 * the wrapper. The wrap stretches the full button height so the
 * popover's `top` is reliable. */
.nav-popover-wrap{position:relative;display:inline-flex;align-items:center}
/* Popover panel — matches the .modal-content recipe: gold-tinged
 * vertical gradient floor, single border-hover rule, deep drop shadow,
 * and a top-center radial gold halo via ::before. The backdrop-filter
 * keeps the actual translucent-glass effect on top of all that, so the
 * panel feels like a tiny modal pinned under the icon. */
.nav-popover{
  position:absolute;top:calc(100% + 10px);right:0;z-index:1080;
  width:420px;max-width:calc(100vw - 24px);
  background:rgba(14,21,32,.90);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 40px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
  transform:translateY(-6px) scale(.98);
  opacity:0;pointer-events:none;
  transition:transform .18s var(--ease),opacity .14s var(--ease);
}
.nav-popover::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:280px;height:280px;border-radius:50%;
  background:transparent;
  pointer-events:none;z-index:0;
}
.nav-popover-wrap[data-open="true"] .nav-popover{
  transform:translateY(0) scale(1);opacity:1;pointer-events:auto;
}
.nav-popover[hidden]{display:block!important}  /* JS toggles via wrap state, not the attr */
[data-theme="light"] .nav-popover{
  background:rgba(248,249,252,.94);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(0,0,0,.11);
  box-shadow:0 8px 40px rgba(0,0,0,.16),
             0 1px 4px rgba(0,0,0,.08),
             inset 0 1px 0 rgba(255,255,255,.90);
}
[data-theme="light"] .nav-popover::before{
  background:transparent;
}
[dir="rtl"] .nav-popover{right:auto;left:0}

.nav-popover-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 16px 10px;border-bottom:1px solid var(--border);
  position:relative;z-index:2;
}
.nav-popover-head-action{
  background:none;border:1px solid var(--border);
  color:var(--text-muted);padding:4px 8px;border-radius:7px;
  cursor:pointer;font-size:12px;line-height:1;flex-shrink:0;
  transition:background .14s,color .14s,border-color .14s;
}
.nav-popover-head-action:hover{
  background:rgba(205,161,44,.12);color:var(--accent);
  border-color:rgba(205,161,44,.35);
}
.nav-popover-title{
  font-size:11.5px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--text-muted);
}
.nav-popover-subcount{
  font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--accent-hover);background:rgba(205,161,44,.12);
  border:1px solid rgba(205,161,44,.30);
  border-radius:99px;padding:2px 8px;text-transform:uppercase;
}

.nav-popover-list{
  max-height:480px;overflow-y:auto;padding:4px 0;
  position:relative;z-index:2;
  scrollbar-width:thin;
  scrollbar-color:rgba(205,161,44,.45) transparent;
}
/* Wrapper holds the link row + an optional inline action row underneath
 * (Follow back / Approve / Skip). The link itself is still .nav-popover-item;
 * actions are stacked beneath so click-through to the target stays clean. */
/* Card-style separator shared by both surfaces:
 *   - Bell list: items wrapped in .nav-popover-item-wrap (it carries
 *     the action menu sibling).
 *   - Messages list: <a class="nav-popover-item"> rendered as a
 *     direct child of .nav-popover-list (no wrap needed — each row
 *     is just a link).
 * Both selectors share the same card chrome below so the two
 * dropdowns read as one family. */
.nav-popover-item-wrap,
.nav-popover-list > .nav-popover-item{
  position:relative;
  display:flex;align-items:center;
  margin:6px 8px;border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-left:3px solid transparent;
  box-shadow:0 1px 0 rgba(0,0,0,.18);
  transition:background .12s var(--ease),border-color .12s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);
}
.nav-popover-item-wrap .nav-popover-item{flex:1;min-width:0}
.nav-popover-item-wrap:hover,
.nav-popover-list > .nav-popover-item:hover{
  background:rgba(205,161,44,.06);
  border-color:rgba(205,161,44,.32);
  border-left-color:rgba(205,161,44,.55);
  box-shadow:0 4px 12px rgba(0,0,0,.32);
  transform:translateY(-1px);
}
.nav-popover-item-wrap.is-unread,
.nav-popover-list > .nav-popover-item.is-unread{
  background:rgba(205,161,44,.05);
  border-left-color:rgba(205,161,44,.55);
}
.nav-popover-item-wrap.is-unread:hover,
.nav-popover-list > .nav-popover-item.is-unread:hover{
  background:rgba(205,161,44,.10);
  border-color:rgba(205,161,44,.42);
}
/* Strip the per-item border-left we used to set on the link itself, since
 * the wrapper now owns the indicator. */
.nav-popover-item-wrap .nav-popover-item{
  border-left:0;background:transparent;
}
/* Action chips inside notification rows (Approve / Skip / Follow back).
 * Right-aligned, compact pill-shaped buttons that don't stretch — the
 * old `flex:1 1 auto` made each chip fill half the row width and
 * dominated the dropdown visually. */
.nav-popover-item-actions{
  display:flex;gap:6px;padding:0 16px 10px;flex-wrap:wrap;justify-content:flex-end;
}
.nav-popover-action-btn{
  flex:0 0 auto;
  padding:3px 10px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  white-space:nowrap;border-radius:99px;line-height:1.4;
}
.nav-popover-action-btn i{font-size:10px}
.nav-popover-action-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:3px 10px;font-size:11px;font-weight:600;
  background:rgba(29,158,117,.10);color:var(--success);
  border:1px solid rgba(29,158,117,.35);border-radius:99px;
  text-transform:none;letter-spacing:0;line-height:1.4;
}
.nav-popover-action-pill i{font-size:10px}
/* Result-state variants applied after an AJAX action collapses the
 * Approve/Later/Skip row into a single status pill. Default
 * .nav-popover-action-pill is is-ok (green). */
.nav-popover-action-pill.is-ok{background:rgba(29,158,117,.10);color:var(--success);border-color:rgba(29,158,117,.35)}
.nav-popover-action-pill.is-info{background:rgba(205,161,44,.10);color:var(--accent);border-color:rgba(205,161,44,.35)}
.nav-popover-action-pill.is-danger{background:rgba(178,62,61,.10);color:#f87171;border-color:rgba(248,113,113,.35)}
/* Actionable "Follow back" pill — gold/accent, looks clickable. Used in the
   bell dropdown and full notifications page for the follow verb. */
.notif-action-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:3px 12px;font-size:11px;font-weight:600;line-height:1.4;
  background:rgba(205,161,44,.15);color:var(--accent);
  border:1px solid rgba(205,161,44,.45);border-radius:99px;
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.notif-action-pill:hover{background:rgba(205,161,44,.28);border-color:rgba(205,161,44,.70)}
.notif-action-pill i{font-size:10px}
/* The form wrapping the pill must not add extra size */
.notif-actions-menu form:has(.notif-action-pill){display:contents}
.nav-popover-list::-webkit-scrollbar{width:8px}
.nav-popover-list::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.nav-popover-list::-webkit-scrollbar-thumb{
  background:rgba(205,161,44,.32);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box;
  transition:background var(--dur-fast) var(--ease);
}
.nav-popover-list::-webkit-scrollbar-thumb:hover{background:rgba(205,161,44,.55);background-clip:padding-box}

.nav-popover-item{
  display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;
  padding:10px 16px;text-decoration:none;color:var(--text-primary);
  border-left:3px solid transparent;
  transition:background .12s var(--ease),border-color .12s var(--ease);
}
.nav-popover-item:hover{
  background:rgba(205,161,44,.06);
  border-left-color:rgba(205,161,44,.35);
  color:var(--text-primary);
}
.nav-popover-item.is-unread{background:rgba(205,161,44,.04)}
.nav-popover-item.is-unread:hover{background:rgba(205,161,44,.10)}

.nav-popover-avatar{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-surface);border:1px solid var(--border);
  overflow:hidden;color:var(--text-muted);font-size:14px;
}
.nav-popover-avatar img{width:100%;height:100%;object-fit:cover;display:block}

.nav-popover-body{
  display:flex;flex-direction:column;
  min-width:0;gap:2px;
}
.nav-popover-name{
  font-size:13px;font-weight:700;color:var(--text-primary);
  display:inline-flex;align-items:center;gap:6px;line-height:1.2;
}
.nav-popover-snippet{
  font-size:12px;color:var(--text-secondary);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-popover-time{
  font-size:11px;color:var(--text-muted);font-weight:600;
  white-space:nowrap;align-self:center;letter-spacing:.02em;
}
.nav-popover-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px rgba(205,161,44,.20);
}

.nav-popover-empty{
  padding:28px 16px;text-align:center;color:var(--text-muted);
}
.nav-popover-empty i{font-size:24px;display:block;margin-bottom:8px;opacity:.65}
.nav-popover-empty p{margin:0;font-size:13px}

.nav-popover-foot{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 16px;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent-hover);text-decoration:none;
  border-top:1px solid var(--border);
  background:rgba(205,161,44,.04);
  transition:background .15s var(--ease),color .15s var(--ease);
  position:relative;z-index:2;
}
.nav-popover-foot:hover{background:rgba(205,161,44,.10);color:var(--accent)}

/* Light theme — item cards, states, foot, and head need stronger contrast
 * over the near-white glass surface (--bg-card: #fff). */
[data-theme="light"] .nav-popover-head{border-bottom-color:rgba(0,0,0,.10)}
[data-theme="light"] .nav-popover-item-wrap,
[data-theme="light"] .nav-popover-list > .nav-popover-item{
  background:rgba(0,0,0,.025);
  border-color:rgba(0,0,0,.07);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
[data-theme="light"] .nav-popover-item-wrap:hover,
[data-theme="light"] .nav-popover-list > .nav-popover-item:hover{
  background:rgba(184,134,42,.09);
  border-color:rgba(184,134,42,.28);
  border-left-color:rgba(184,134,42,.50);
  box-shadow:0 2px 8px rgba(0,0,0,.07);
}
[data-theme="light"] .nav-popover-item-wrap.is-unread,
[data-theme="light"] .nav-popover-list > .nav-popover-item.is-unread{
  background:rgba(184,134,42,.07);border-left-color:rgba(184,134,42,.50);
}
[data-theme="light"] .nav-popover-item-wrap.is-unread:hover,
[data-theme="light"] .nav-popover-list > .nav-popover-item.is-unread:hover{
  background:rgba(184,134,42,.12);
}
[data-theme="light"] .nav-popover-item:hover{background:rgba(184,134,42,.07);border-left-color:rgba(184,134,42,.35)}
[data-theme="light"] .nav-popover-item.is-unread{background:rgba(184,134,42,.05)}
[data-theme="light"] .nav-popover-item.is-unread:hover{background:rgba(184,134,42,.10)}
[data-theme="light"] .nav-popover-foot{background:rgba(184,134,42,.05);border-top-color:rgba(0,0,0,.09)}
[data-theme="light"] .nav-popover-foot:hover{background:rgba(184,134,42,.11)}
[data-theme="light"] .nav-capsule-user-link:hover{background:rgba(0,0,0,.05)}
.nav-popover-foot i{font-size:10px;opacity:.85}

/* ── Notification snooze ───────────────────────────────────────────
 * Bell icon turns into a moon when snoozed. The snooze bar sits
 * between the notification list and the "See all" foot link. */
.nav-capsule-btn.is-snoozed i{opacity:.7}
.nav-bell-snooze-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;
  color:var(--text-muted);
  padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid var(--border);
}
[data-theme="light"] .nav-bell-snooze-badge{background:rgba(0,0,0,.04)}
.nav-snooze-bar{
  border-top:1px solid var(--border);
  padding:8px 12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:transparent;
}
.nav-snooze-trigger{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:transparent;color:var(--text-muted);
  font-size:12px;font-weight:600;cursor:pointer;
  transition:background .14s,color .14s;
}
.nav-snooze-trigger:hover{
  background:rgba(205,161,44,.12);color:var(--accent);border-color:rgba(205,161,44,.4);
}
.nav-snooze-panel{
  display:flex;flex-wrap:wrap;gap:5px;
  margin-top:6px;padding:6px 12px 8px;
  border-top:1px solid var(--border);
  background:var(--bg-card);
  width:100%;box-sizing:border-box;
}
.nav-snooze-panel .nav-snooze-form{display:contents}
.nav-snooze-panel button{
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:transparent;color:var(--text-secondary);
  font-size:12px;cursor:pointer;
  transition:background .13s,color .13s;
}
.nav-snooze-panel button:hover{
  background:rgba(205,161,44,.12);color:var(--accent);border-color:rgba(205,161,44,.4);
}
.nav-snooze-wake-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:999px;
  border:1px solid rgba(205,161,44,.4);
  background:rgba(205,161,44,.12);color:var(--accent);
  font-size:12px;font-weight:600;cursor:pointer;
  transition:background .14s;
}
.nav-snooze-wake-btn:hover{background:rgba(205,161,44,.22)}
[data-theme="light"] .nav-snooze-bar{border-top-color:rgba(0,0,0,.09)}
[data-theme="light"] .nav-snooze-panel{border-top-color:rgba(0,0,0,.09);background:#f9f9fb}

/* ── Lock card (private + blocked profile placeholder) ────────────
 * Mirror of the .modal-content recipe — gold-tinged gradient floor,
 * a dropshadow halo via ::before, and an accent emblem inset at top.
 * One layout serves three states (private / blocked-by-them /
 * blocked-by-viewer) via .is-private vs .is-blocked variants that
 * swap the accent token. */
.lock-card{
  position:relative;max-width:440px;margin:80px auto;
  padding:40px 28px 32px;text-align:center;
  background:var(--bg-card);
  border:1px solid var(--border-hover);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  overflow:hidden;
}
.lock-card.is-blocked{
  background:var(--bg-card);
}
.lock-card-halo{
  position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:280px;height:280px;border-radius:50%;
  background:transparent;
  pointer-events:none;
}
.lock-card.is-blocked .lock-card-halo{
  background:transparent;
}
.lock-card-emblem{
  position:relative;z-index:2;
  width:72px;height:72px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:30px;
  margin:0 auto 14px;
  filter:drop-shadow(0 6px 18px rgba(205,161,44,.40));
}
.lock-card.is-blocked .lock-card-emblem{
  background:rgba(178,62,61,.15);
  color:var(--danger);
  filter:drop-shadow(0 6px 18px rgba(178,62,61,.40));
}
.lock-card-eyebrow{
  position:relative;z-index:2;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  margin:0 0 6px;
}
.lock-card.is-blocked .lock-card-eyebrow{color:var(--danger)}
.lock-card-name{
  position:relative;z-index:2;
  font-family:'Cormorant Garamond',serif;
  font-size:28px;font-weight:700;color:var(--text-primary);
  margin:0 0 12px;letter-spacing:.01em;
}
.lock-card-body{
  position:relative;z-index:2;
  font-size:14px;line-height:1.6;color:var(--text-secondary);
  margin:0 auto 22px;max-width:36ch;
}
.lock-card-actions{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.lock-card-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;font-size:13px;font-weight:600;
}
.lock-card-cta.is-disabled{
  opacity:.65;pointer-events:none;cursor:default;
}
[data-theme="light"] .lock-card{
  background:var(--bg-card);
  box-shadow:0 24px 60px rgba(0,0,0,.14);
}
[data-theme="light"] .lock-card.is-blocked{
  background:var(--bg-card);
}

/* themed Google sign-in button — matches arch-btn-ghost (dark/light follow tokens) */
.arch-btn-google{background:var(--bg-surface)!important;color:var(--text-primary)!important;border:1px solid var(--border-hover)!important;border-radius:var(--radius-sm)!important;padding:10px 16px;font-weight:600;font-size:14px;transition:background .15s,border-color .15s,color .15s}
.arch-btn-google:hover{background:var(--accent-dim)!important;border-color:rgba(255,199,60,.45)!important;color:var(--accent)!important}
.arch-btn-google svg{flex-shrink:0}

/* auth pages — full-viewport network-mesh background (login / signup / landing) */
.auth-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background:var(--bg-base)}
/* Light theme — keep the mesh visible but recolour it. Canvas backdrop is
 * bg-card (white); segments are drawn in bg-base by the JS (it reads
 * `--mesh-rgb` from the document element). Gives a soft blueprint feel
 * instead of the gold-on-dark space-network of the dark theme. */
[data-theme="light"] .auth-bg{background:var(--bg-card)}
/* The site logo file is white-on-transparent (main_logo_white.png), so on a
 * light surface it disappears. Recolour to match --text-primary
 * (the same ink as "The architect's network" headline) using a precise
 * filter chain. Computed from #1a2436 starting from a white source. */
[data-theme="light"] .home-hero-logo,
[data-theme="light"] .footer img[alt="logo"],
[data-theme="light"] img[src*="main_logo_white"]{
  filter:brightness(0) saturate(100%) invert(11%) sepia(20%) saturate(1500%) hue-rotate(189deg) brightness(96%) contrast(92%);
}

/* Whenever the mesh canvas is rendered, navbar + footer must sit above it. */
nav.navbar{position:sticky;top:0;z-index:1100}
/* H-17 — dimming backdrop + scroll-lock behind the open mobile navbar menu */
.navbar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1090;opacity:0;transition:opacity .2s ease}
.navbar-backdrop.show{opacity:1}
body.nav-open{overflow:hidden}
@media (min-width:992px){.navbar-backdrop{display:none!important}}
/* UI-01 — Bootstrap modals (z 1055/1050 backdrop) and the ⌘K omnibox (z 1090)
 * were opening UNDERNEATH the sticky navbar (z 1100), so the bar stayed fully
 * lit and clickable on top of the dim backdrop — a modal that doesn't actually
 * block. While any modal / quick-search overlay is open, drop the navbar below
 * the backdrop so the dialog truly captures the surface. Higher specificity
 * than both .navbar (587) and nav.navbar (1268) rules, so no !important. */
body.modal-open nav.navbar,
body.omnibox-open nav.navbar{z-index:1040}
.nav-trailing{display:flex;align-items:center}

/* UI-08 — the mobile nav drawer (Bootstrap .navbar-collapse) was a flat,
 * transparent, in-flow list: the H-17 backdrop dimmed the page behind it, but
 * the menu items themselves had no surface so the dimmed page showed straight
 * through. Give the open drawer an opaque card panel with its own scroll; and
 * where the fixed bottom tab bar already carries Search (≤767px) drop the
 * duplicated drawer search field. */
@media(max-width:991.98px){
  #mainNav.navbar-collapse.show,
  #mainNav.navbar-collapse.collapsing{
    background:var(--bg-card);
    margin-top:10px;
    padding:14px 16px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 16px 32px rgba(0,0,0,.40);
    max-height:calc(100svh - 64px);overflow-y:auto;
  }
  /* Drawer trailing controls -> ONE row (signed-in): messages/notifs | toggles | avatar+arrow. */
  #mainNav.navbar-collapse.show .nav-trailing:has(.nav-capsule){width:100%;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;margin-top:12px;padding:5px 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px}
  #mainNav.navbar-collapse.show .nav-trailing:has(.nav-capsule) .nav-capsule{display:contents}
  #mainNav.navbar-collapse.show .nav-trailing .nav-popover-wrap:has(#navbarMsgBell){order:1}
  #mainNav.navbar-collapse.show .nav-trailing .nav-popover-wrap:has(#navbarBell){order:2}
  #mainNav.navbar-collapse.show .nav-trailing .nav-util-capsule{order:3;margin-inline-start:auto;background:none;border:none;padding:0}
  #mainNav.navbar-collapse.show .nav-trailing .nav-popover-wrap:has(.nav-capsule-user-btn){order:4;margin-inline-start:auto}
  #mainNav.navbar-collapse.show .nav-trailing .nav-capsule-sep{display:none}
  #mainNav.navbar-collapse.show .nav-capsule-name{display:none}
  /* Guest: keep the auth buttons stacked full-width. */
  #mainNav.navbar-collapse.show .nav-trailing:not(:has(.nav-capsule)){width:100%;display:flex;flex-direction:column;gap:8px;margin-top:12px}
  #mainNav.navbar-collapse.show .nav-trailing:not(:has(.nav-capsule)) .nav-control{width:100%;margin-inline:0}
  #mainNav.navbar-collapse.show .nav-trailing:not(:has(.nav-capsule)) .nav-util-capsule{width:100%;justify-content:center}
}
@media(max-width:767.98px){
  #mainNav .navbar-search{display:none}
}
footer.footer{position:relative;z-index:5}

/* Mesh-bg pages get a faint translucent footer so it reads against the mesh. */
body.has-mesh-bg>footer.footer{background:rgba(15,21,32,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--border)}
[data-theme="light"] body.has-mesh-bg>footer.footer{background:rgba(245,246,248,.78)}
body.has-mesh-bg>.pb-5{position:relative;z-index:1}
/* Keep an opaque body background under the mesh canvas. The canvas is
 * a child of <body> and paints on top, so the colour shows through
 * only at the edges — but a11y tools (axe-core) walk up to find an
 * opaque ancestor for contrast checks; without this, every text node
 * on the public landing page reports against #ffffff. */
body.has-mesh-bg{background:var(--bg-base)!important}

/* Auth body becomes a non-scrolling flex column: navbar | content | footer.
   The form card scrolls internally if it ever exceeds the available space. */
body.body-auth{min-height:100svh;min-height:100vh;display:flex;flex-direction:column}
body.body-auth>nav.navbar{flex-shrink:0}
body.body-auth>footer.footer{flex-shrink:0}
body.body-auth>.pb-5{flex:1;min-height:0;padding-bottom:0!important;display:flex;flex-direction:column}

.auth-page{flex:1;min-height:0;display:flex;align-items:center;position:relative;z-index:1}
.auth-page .container{max-height:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.auth-card-wrap{display:flex;justify-content:center;align-items:flex-start;padding:0 12px;max-height:100%;min-height:0;overflow:hidden}

/* Mobile: release the viewport lock so the soft keyboard doesn't cut the form */
@media(max-width:640px){
  body.body-auth{min-height:100svh;min-height:100vh}
  body.body-auth>.pb-5{overflow:visible;min-height:0}
  .auth-page{align-items:flex-start;padding-block:20px}
  .auth-page .container{max-height:none;overflow:visible}
  .auth-card-wrap{max-height:none;overflow:visible;padding-bottom:28px}
  .auth-card{max-height:none}
  /* hide mesh canvas on phones — saves GPU paint + removes visual noise */
  .auth-bg{display:none}
  body.has-mesh-bg>footer.footer{background:var(--bg-card);backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-theme="light"] body.has-mesh-bg>footer.footer{background:var(--bg-card)}
}
/* Short viewport (landscape window, squished browser): same unlock so
   the footer can't cover the form on any tall-but-narrow screen.
   Navbar ≈60px + footer ≈200px + min form ≈350px → trip at 640px. */
@media(max-height:640px){
  body.body-auth{height:auto;overflow:visible}
  body.body-auth>.pb-5{overflow:visible;min-height:0}
  .auth-page{align-items:flex-start;padding-block:16px}
  .auth-page .container{max-height:none;overflow:visible}
  .auth-card-wrap{max-height:none;overflow:visible;padding-bottom:24px}
  .auth-card{max-height:none}
}
.auth-card{width:100%;max-width:440px;max-height:100%;overflow-y:auto;background:rgba(22,30,44,.78)!important;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--border-hover);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,199,60,.06) inset}
.auth-card::-webkit-scrollbar{width:6px}
.auth-card::-webkit-scrollbar-thumb{background:var(--overlay-medium);border-radius:99px}
[data-theme="light"] .auth-card{background:rgba(255,255,255,.78)!important;box-shadow:0 20px 60px rgba(0,0,0,.10),0 0 0 1px rgba(184,134,42,.08) inset}

/* landing pillars — clean cards, no halo */
.pillar-card{padding:26px 18px 28px;border-radius:var(--radius-lg);transition:transform .3s ease}
.pillar-card:hover{transform:translateY(-3px)}
.pillar-icon{width:48px;height:48px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:20px}
.pillar-title{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
/* --text-muted (#8a99af) does not pass WCAG AA against the auth-mesh
 * background variant; lift to a brighter neutral on the home pillar
 * cards specifically. */
.pillar-body{font-size:13px;color:#c5cad6;line-height:1.6;margin:0 auto;max-width:280px}
[data-theme="light"] .pillar-body{color:#3a4252}

/* navbar — uniform 38px height across login/signup/lang/theme/bell/avatar/logout */
.nav-control{height:38px;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:13px;padding:0 16px;box-sizing:border-box}
.nav-control.theme-toggle,.nav-control.navbar-bell{width:38px;padding:0}
/* .user-avatar handles its own padding/background — full styling lives in
 * the user-avatar block above. Don't override here. */

/* password reset */
.reset-password{margin-top:50px;width:60%;background-color:var(--bg-card);padding:24px;border-radius:var(--radius-lg);margin-bottom:15px}
.reset-password h2{color:var(--accent)}

/* login/signup */
.login-img img,.sign-up-img img{width:75%!important;float:right;opacity:.12}
.sign-up-card,.login-card{border-radius:var(--radius-lg)}
.login-card a:last-child{color:#5a9eed;font-weight:600}
/* Form-actions row — used by every add/edit form for the submit + cancel
 * pair. Submit gets the .arch-cta look; cancel stays a ghost button. */
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.form-actions .btn{height:32px;display:inline-flex;align-items:center;font-size:12px;padding:0 14px}
.form-actions .arch-cta[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}

/* ── Global checkbox + radio styling ────────────────────────────────
 * Drops browser-default white squares and renders a glass-card look:
 * dark surface unchecked, gold fill + dark check mark when checked.
 * Per-component scoped rules (.arch-form-shell .form-check-input,
 * .app-filter-toggle …, .search-rail-toggle …) keep their higher
 * specificity and override this. The Bootstrap .btn-check pattern is
 * intentionally skipped — those checkboxes drive a sibling label and
 * are visually-hidden by Bootstrap. */
input[type="checkbox"]:not(.btn-check),
input[type="radio"]:not(.btn-check){
  /* NATIVE checkbox/radio with a gold accent — NOT a custom appearance:none box.
     The custom box drew its :checked fill via a CSS background, and a
     backdrop-filter ancestor (the glassmorphism auth / office / modal cards —
     measured live: .user-signing-form.auth-card = backdrop-filter:blur(14px))
     traps that background repaint on Chromium until a reflow: the box toggles
     but doesn't fill until you click away. Layer-promotion / display / transition
     tweaks all failed because the trap is in the ancestor, not the box. The
     native control is painted by the browser's own widget layer, which is immune
     to the trap. accent-color keeps it on-brand; the global color-scheme:dark
     gives correct dark-mode rendering; !important beats the per-component scoped
     appearance:none overrides so every checkbox on the site is native. */
  -webkit-appearance:auto!important;
  appearance:auto!important;
  accent-color:var(--accent);
  /* Neutralise the old custom box's background/border (the :checked gold fill +
     SVG check, hover/indeterminate, light-theme variants below) so nothing
     ghosts behind the native widget. !important beats their higher specificity. */
  background:none!important;
  border:0!important;
  width:16px;height:16px;
  margin:0;flex-shrink:0;
  cursor:pointer;
  vertical-align:middle;
}
input[type="checkbox"]:not(.btn-check){border-radius:4px}
input[type="radio"]:not(.btn-check){border-radius:50%}

/* Restore the checkbox/radio ↔ label gap. The reset above sets margin:0
 * at specificity (0,2,1), which — despite the note above — OUTRANKS the
 * (0,2,0) ".arch-form-shell .form-check-input" rule and collapsed the
 * negative margin Bootstrap's float layout needs. Result: every crispy
 * .form-check label rendered flush against (overlapping) the box, on
 * every form. Re-assert it un-scoped, at matching specificity, with
 * logical props so LTR + RTL both get the gap on the correct side. */
.form-check{padding-inline-start:1.6em}
input.form-check-input:not(.btn-check){margin-inline-start:-1.6em}

/* Hover — gentle border brightening, no fill change. */
input[type="checkbox"]:not(.btn-check):not(:disabled):hover,
input[type="radio"]:not(.btn-check):not(:disabled):hover{
  border-color:rgba(205,161,44,.55);
}

/* Checked — gold fill + dark mark via inline SVG (no extra DOM). */
input[type="checkbox"]:not(.btn-check):checked{
  background-color:var(--accent);
  border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23161e2c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,5'/%3E%3C/svg%3E");
  background-size:80% 80%;
  background-position:center;
  background-repeat:no-repeat;
}
input[type="radio"]:not(.btn-check):checked{
  background-color:var(--accent);
  border-color:var(--accent);
  background-image:radial-gradient(circle, #161e2c 38%, transparent 42%);
}

/* Indeterminate — used for tri-state group toggles (some children
 * checked). Renders a horizontal dash so the user knows it's neither
 * fully on nor off. */
input[type="checkbox"]:not(.btn-check):indeterminate{
  background-color:var(--accent);
  border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23161e2c' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='4' y1='8' x2='12' y2='8'/%3E%3C/svg%3E");
  background-size:80% 80%;
  background-position:center;
  background-repeat:no-repeat;
}

/* Focus — gold ring matching the rest of the form-control language. */
input[type="checkbox"]:not(.btn-check):focus-visible,
input[type="radio"]:not(.btn-check):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(205,161,44,.25);
  border-color:var(--accent);
}

/* Disabled — dimmed and uninteractive. */
input[type="checkbox"]:not(.btn-check):disabled,
input[type="radio"]:not(.btn-check):disabled{
  opacity:.45;cursor:not-allowed;
}

/* Light theme — same shape, lighter surface, and the check mark
 * stays dark (theme accent is a darker gold so contrast still works). */
[data-theme="light"] input[type="checkbox"]:not(.btn-check),
[data-theme="light"] input[type="radio"]:not(.btn-check){
  background-color:#ffffff;
  border-color:rgba(0,0,0,.18);
}
[data-theme="light"] input[type="checkbox"]:not(.btn-check):not(:disabled):hover,
[data-theme="light"] input[type="radio"]:not(.btn-check):not(:disabled):hover{
  border-color:rgba(184,134,42,.55);
}
[data-theme="light"] input[type="checkbox"]:not(.btn-check):checked,
[data-theme="light"] input[type="checkbox"]:not(.btn-check):indeterminate,
[data-theme="light"] input[type="radio"]:not(.btn-check):checked{
  background-color:var(--accent);
  border-color:var(--accent);
}
[data-theme="light"] input[type="radio"]:not(.btn-check):checked{
  background-image:radial-gradient(circle, #ffffff 38%, transparent 42%);
}
[data-theme="light"] input[type="checkbox"]:not(.btn-check):checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,5'/%3E%3C/svg%3E");
}
[data-theme="light"] input[type="checkbox"]:not(.btn-check):indeterminate{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='4' y1='8' x2='12' y2='8'/%3E%3C/svg%3E");
}

.user-signing-form{background:var(--bg-card)!important;border:1px solid var(--border);padding:24px;border-radius:14px;margin-bottom:15px;box-shadow:var(--shadow-sm)}
.user-signing-form input[type=text],.user-signing-form input[type=password],.user-signing-form input[type=tel],.user-signing-form input[type=email],.user-signing-form input[type=url],.user-signing-form input[type=file]{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}
.user-signing-form input::placeholder,.user-signing-form textarea::placeholder{color:var(--text-muted)!important}
.user-signing-form input[type=text]:focus,.user-signing-form input[type=password]:focus,.user-signing-form input[type=email]:focus,.user-signing-form input[type=tel]:focus,.user-signing-form input[type=url]:focus{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid rgba(255,199,60,.40)!important;box-shadow:none!important;outline:none!important}
.user-signing-form input::file-selector-button{background-color:var(--bg-surface)!important;color:var(--text-secondary);border:none}
.user-signing-form .input-group-text{background-color:var(--bg-surface)!important;border:none;cursor:pointer}
.user-signing-form i{background-color:var(--bg-surface)!important;color:var(--text-secondary)}
.user-signing-form textarea{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm);resize:none}
.user-signing-form textarea:focus{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid rgba(255,199,60,.40)!important;box-shadow:none!important;outline:none!important}
.user-signing-form select{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}

/* index/home */
.welcome{text-align:center;width:100%;padding-top:120px}
.welcome h1{font-size:36px;margin-bottom:10px;color:var(--text-primary)}
.welcome img{width:500px;height:120px}
.welcome-buttons a{padding:10px 50px;margin:10px}
.posts-section h2{font-size:13px;margin-bottom:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em}
.matched-user-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  width:80%;text-align:center;padding:12px;
  transition:background .2s,transform .3s,box-shadow .2s,border-color .2s;
  box-shadow:var(--shadow-sm);
}
.matched-user-card:hover{
  background:var(--bg-surface);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 0 1px rgba(205,161,44,.20);
  border-color:rgba(205,161,44,.30);
}

/* Suggested-user tile — "People you may know" on the home feed.
 * Same gold-halo + accent-lift treatment as .post-card, scaled down to a
 * small 90px-wide chip so a row of suggestions fits the feed sidebar. */
.suggested-user-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 16px;min-width:90px;text-align:center;
  transition:background .2s,transform .3s,box-shadow .2s,border-color .2s;
  box-shadow:var(--shadow-sm);
  height:100%;width:100%;display:flex;flex-direction:column;
}
.suggested-user-card>a{flex:1;display:block;text-decoration:none}
.suggested-user-card:hover{
  background:var(--bg-surface);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 0 1px rgba(205,161,44,.20);
  border-color:rgba(205,161,44,.30);
}
.suggested-user-card img{width:52px;height:52px;border-radius:var(--radius-md);object-fit:cover;display:block;margin:0 auto 6px;transition:transform .3s var(--ease)}
.suggested-user-card:hover img{transform:scale(1.06)}
.suggested-user-card .name{font-size:12px;font-weight:600;color:var(--text-primary);margin:0;transition:color .15s}
.suggested-user-card:hover .name{color:var(--accent)}
.suggested-user-card .role{font-size:10px;color:var(--text-muted);margin:0}

/* "People you may know" wrapper — single post-card-style panel that holds
 * a non-wrapping horizontal rail of suggested-user chips. Overflow scrolls
 * sideways instead of breaking onto a second row. */
.suggested-users-panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 18px 14px;
  box-shadow:var(--shadow-sm);
  transition:background .2s,box-shadow .2s,border-color .2s;
}
.suggested-users-panel:hover{
  background:var(--bg-surface);
  border-color:rgba(205,161,44,.22);
}
.suggested-users-rail{
  display:flex;flex-wrap:nowrap;gap:10px;
  align-items:stretch;justify-content:center;
  padding:2px;
}
/* Cards always take their natural width and center as a group — never
 * stretch, regardless of how many matches there are. JS toggles `.is-hidden`
 * on cards that overflow the rail and on the See-more tile when it isn't
 * needed. */
.suggested-users-rail > a{
  flex:0 0 auto;min-width:0;
  display:block;text-decoration:none;
}
.suggested-users-rail > a.is-hidden{display:none}
.suggested-users-rail .suggested-user-card{
  min-width:0;padding:12px 8px;
}
.suggested-users-rail .suggested-user-card .name,
.suggested-users-rail .suggested-user-card .role{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* "See more" tile — structurally identical to .suggested-user-card so it
 * shares the rail's flex slot dimensions exactly. The .more-icon is sized
 * to mirror the user-card avatar (52x52 + same margin) so heights align.
 * Accent-tinted face + dashed border distinguish it visually. */
.su-follow-btn{
  display:block;width:100%;margin-top:auto;padding-top:8px;
  padding:5px 0;font-size:11px;font-weight:600;
  border-radius:6px;border:none;cursor:pointer;
  transition:opacity .15s,background .15s;
  background:var(--accent);color:#000;
}
.su-follow-btn:hover{opacity:.85}
.su-follow-btn.su-state-following{
  background:transparent;border:1px solid var(--success,#3fb950);
  color:var(--success,#3fb950);cursor:default;
}
.su-follow-btn.su-state-requested{
  background:transparent;border:1px solid var(--text-muted);
  color:var(--text-muted);cursor:default;
}
.su-follow-btn.su-state-loading{opacity:.5;pointer-events:none}
.suggested-user-card.su-followed{border-color:var(--success,#3fb950)!important}
.suggested-user-card--more{
  background:var(--bg-card);
  border-style:dashed;border-color:rgba(205,161,44,.35);
}
.suggested-user-card--more:hover{
  background:var(--bg-surface);
  border-style:solid;border-color:rgba(205,161,44,.55);
}
.suggested-user-card--more .more-icon{
  width:52px;height:52px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:rgba(205,161,44,.18);color:var(--accent);
  font-size:18px;margin:0 auto 6px;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.suggested-user-card--more:hover .more-icon{
  background:rgba(205,161,44,.30);transform:scale(1.06);
}
.suggested-user-card--more .name{color:var(--accent)!important}
[data-theme="light"] .suggested-users-panel{
  background:var(--bg-card);
}

/* Tighten chips on narrower viewports so 8 still fit a single row */
@media (max-width: 991px){
  .suggested-users-rail{gap:8px}
  .suggested-users-rail .suggested-user-card{padding:10px 6px}
  .suggested-users-rail .suggested-user-card img,
  .suggested-users-rail .suggested-user-card--more .more-icon{width:44px;height:44px}
  .suggested-users-rail .suggested-user-card .role{display:none}
}
@media (max-width: 575px){
  .suggested-users-rail{gap:6px}
  .suggested-users-rail .suggested-user-card img,
  .suggested-users-rail .suggested-user-card--more .more-icon{width:36px;height:36px;font-size:14px}
  .suggested-users-rail .suggested-user-card .name{font-size:10px}
}

/* Followers / Following compact row list */
.follow-list{display:flex;flex-direction:column;max-height:420px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.follow-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 6px;
  border-top:1px solid var(--border);
  text-decoration:none;color:var(--text-primary);
  border-radius:var(--radius-sm);
  transition:background .12s,padding-left .12s;
}
.follow-row:first-child{border-top:0}
.follow-row:hover{background:var(--accent-dim);padding-left:12px}
.follow-row-avatar{
  width:36px;height:36px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  border:1px solid var(--border);
}
.follow-row-name{font-size:13px;font-weight:600;color:var(--text-primary);flex-shrink:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s}
.follow-row:hover .follow-row-name{color:var(--accent)}
.follow-row-role{
  font-size:11.5px;color:var(--text-muted);
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.follow-row-arrow{color:var(--text-muted);font-size:10px;flex-shrink:0;transition:color .12s,transform .12s}
.follow-row:hover .follow-row-arrow{color:var(--accent);transform:translateX(2px)}
.follow-overflow-note{font-size:11px;color:var(--text-muted);text-align:center;padding:8px 0 2px;margin:0;}
.follow-count{font-size:11px;font-weight:400;color:var(--text-muted)}
.follow-see-all{display:block;font-size:12px;color:var(--accent);text-align:center;padding:8px 0 2px;margin:0;text-decoration:none}
.follow-see-all:hover{text-decoration:underline;color:var(--accent)}
.follow-page-list{display:flex;flex-direction:column;}

/* kept for any legacy reference — no longer rendered */
.profile-people-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 6px;text-align:center;
  height:100%;
  transition:background .2s,transform .25s,box-shadow .2s,border-color .2s;
  box-shadow:var(--shadow-sm);
}
.profile-people-card:hover{
  background:var(--bg-surface);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.22),0 0 0 1px rgba(205,161,44,.18);
  border-color:rgba(205,161,44,.28);
}
.profile-people-card img{
  width:30px;height:30px;border-radius:8px;
  object-fit:cover;display:block;margin:0 auto 4px;
  transition:transform .25s var(--ease);
}
.profile-people-card:hover img{transform:scale(1.06)}
.profile-people-card .name{
  font-size:10.5px;font-weight:600;color:var(--text-primary);
  margin:0;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .15s;
}
.profile-people-card:hover .name{color:var(--accent)}
.profile-people-card .role{
  font-size:9px;color:var(--text-muted);
  margin:0;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Header row for the Followers / Following sidebar cards — section label on
 * the left, .visi-pill toggle on the right (same chip pattern as the About
 * card, kept tight to the 28px pill height). */
.profile-list-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:12px;
}

/* ── intl-tel-input theme — full redesign ─────────────────────
 * Re-skins the phone-with-flag widget to match the rest of the site:
 * gold-on-dark glass for the dial-code tile, frosted-glass dropdown
 * with gold-tinted hover, custom scrollbar, gold-ring focus on the
 * country search box. Targets v23.x class names; older v17 names
 * (.iti__selected-flag) are kept aliased so both versions render
 * coherently if the package is bumped or pinned differently. */
.iti{width:100%}

/* The dial-code tile — glassy gold-tinted button on the left of the
 * input. Matches the input's height + radius so the two read as one
 * control, with a subtle vertical seam. */
.iti--separate-dial-code .iti__selected-flag,
.iti__selected-country,
.iti__country-container > button{
  background:var(--bg-surface)!important;
  border:1px solid rgba(255,255,255,.10);
  border-right:1px solid rgba(255,255,255,.14);
  border-top-left-radius:var(--radius-md);
  border-bottom-left-radius:var(--radius-md);
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  height:36px;padding:0 10px;
  color:var(--text-primary);
  transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .2s var(--ease);
}
.iti--separate-dial-code .iti__selected-flag:hover,
.iti__selected-country:hover,
.iti__country-container > button:hover,
.iti--separate-dial-code .iti__selected-flag:focus-visible,
.iti__selected-country[aria-expanded="true"]{
  background:var(--accent-dim)!important;
  border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  outline:none;
}
.iti__selected-dial-code{color:var(--accent);font-weight:600;letter-spacing:.01em}

/* Dropdown panel — frosted glass + soft gold border, same vocabulary
 * as the bell popover and arch-modal shells. */
.iti__country-list,
.iti__dropdown-content{
  background:rgba(22,30,44,.78)!important;
  border:1px solid var(--border-hover)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  color:var(--text-primary)!important;
  padding:6px;
  max-height:320px;
  overflow-y:auto;
}
.iti__country-list::-webkit-scrollbar{width:8px}
.iti__country-list::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:99px}
.iti__country-list::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* Each country row — comfortable hit target, gold-wash on hover. */
.iti__country{
  padding:8px 10px;
  border-radius:8px;
  font-size:13px;
  color:var(--text-primary);
  transition:background .12s var(--ease),color .12s var(--ease);
}
.iti__country.iti__highlight,
.iti__country:hover{
  background:rgba(205,161,44,.16)!important;
  color:var(--accent)!important;
}
.iti__country.iti__active{
  background:var(--accent-dim)!important;
  color:var(--accent)!important;
  font-weight:600;
}
.iti__divider{border-bottom:1px solid var(--border);margin:6px 4px}
.iti__country-name{color:inherit}
.iti__dial-code{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-inline-start:6px}

/* Search box at the top of the dropdown — gold focus ring matches
 * the rest of the form-control language. */
.iti__search-input{
  background:var(--bg-surface)!important;
  border:1px solid var(--border-hover)!important;
  color:var(--text-primary)!important;
  border-radius:var(--radius-sm)!important;
  padding:8px 12px!important;
  font-size:13px;
  margin:2px 4px 8px;width:calc(100% - 8px);
  transition:border-color .15s var(--ease),box-shadow .2s var(--ease);
}
.iti__search-input::placeholder{color:var(--text-muted)}
.iti__search-input:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(205,161,44,.18)!important;
  outline:none;
}

/* RTL — flip the dial-code tile to the right edge. */
[dir="rtl"] .iti--separate-dial-code .iti__selected-flag,
[dir="rtl"] .iti__selected-country,
[dir="rtl"] .iti__country-container > button{
  border-top-right-radius:var(--radius-md);
  border-bottom-right-radius:var(--radius-md);
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-right:1px solid rgba(255,255,255,.10);
  border-left:1px solid rgba(255,255,255,.14);
}
[dir="rtl"] .iti__dial-code{margin-inline-start:0;margin-inline-end:6px}

/* Light theme — softer gold gradient + opaque dropdown. */
[data-theme="light"] .iti--separate-dial-code .iti__selected-flag,
[data-theme="light"] .iti__selected-country,
[data-theme="light"] .iti__country-container > button{
  background:var(--bg-surface)!important;
  border-color:rgba(0,0,0,.10);
}
[data-theme="light"] .iti__country-list,
[data-theme="light"] .iti__dropdown-content{
  background:#ffffff!important;
  border-color:#e8e1cd!important;
  box-shadow:0 14px 36px rgba(0,0,0,.10);
}
[data-theme="light"] .iti__country.iti__highlight,
[data-theme="light"] .iti__country:hover{
  background:rgba(184,134,42,.10)!important;color:var(--accent)!important;
}

/* Profile sidebar avatar — soft, equal gold halo on all four sides. Zero
 * offset so the glow radiates evenly; opacity kept low so it whispers. */
.profile-avatar-wrap{
  position:relative;
  display:inline-block;
  margin:0 auto 14px;
}
.profile-avatar{
  display:block;
  width:120px;height:120px;border-radius:18px;
  object-fit:cover;cursor:pointer;
  box-shadow:0 0 18px rgba(205,161,44,.22);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.profile-avatar:hover{
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(205,161,44,.30);
}
/* Camera button — sits on the bottom-right corner of the avatar. Owner only.
 * Transparent disc with a text-secondary glyph; lifts to text-primary + a
 * faint accent ring on hover so it whispers rather than shouts. */
.profile-avatar-edit{
  position:absolute;bottom:6px;inset-inline-end:6px;
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  color:var(--text-secondary);
  border:1px solid var(--border-hover);
  cursor:pointer;padding:0;
  font-size:12px;line-height:1;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:color .15s,border-color .15s,background .15s,transform .15s;
}
.profile-avatar-edit:hover{
  color:var(--text-primary);
  border-color:rgba(205,161,44,.55);
  background:rgba(0,0,0,.18);
  transform:scale(1.06);
}

/* ── About tab on the profile page ──────────────────────────
 * Mood: same gold-halo gradient surface used by .post-creation-form so
 * the profile reads as one family with the rest of the app. Each row is
 * three columns (icon-label · value · visibility chip) and the chip
 * makes its current state explicit so the user never has to guess what
 * a bare eye icon means. */
.user-about-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 26px;
  box-shadow:var(--shadow-sm);
  margin-bottom:14px;
}
.user-about-card:last-child{margin-bottom:0}
.user-about-title{
  color:var(--accent);
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
  font-size:18px;font-weight:700;letter-spacing:.01em;
  display:flex;align-items:center;gap:10px;
}
.user-about-title i{font-size:15px;color:var(--accent)}
.user-about-head-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.user-about-head-row .user-about-title{margin:0;padding:0;border:none}

/* Bio block — sits under the About header, before the field grid */
.about-bio{
  margin:0 0 22px;
  padding:14px 18px;
  background:var(--overlay-soft);
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.about-bio-text{
  margin:0;
  font-size:14.5px;color:var(--text-primary);line-height:1.7;
  word-break:break-word;
}
.about-bio-text.is-clamped{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.about-bio-placeholder{color:var(--text-muted);font-style:italic;font-size:13.5px}
.about-bio-toggle{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;padding:4px 10px;
  background:transparent;border:none;
  color:var(--accent);font-size:12px;font-weight:600;
  cursor:pointer;border-radius:var(--radius-sm);
  transition:background .15s,color .15s;
}
.about-bio-toggle:hover{background:var(--accent-dim)}
.about-bio-toggle i{font-size:10px;line-height:1}
.about-bio-toggle[hidden]{display:none}

.about-eyebrow{
  font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.08em;
  margin:18px 0 6px;
}
.user-about-card .about-eyebrow:first-of-type{margin-top:0}

.about-list{display:flex;flex-direction:column}
/* Collapsed mode: hide rows past the 5th. JS toggles is-collapsed and
 * shows/hides the trailing .about-show-more button. */
.about-list.is-collapsed > .about-row:nth-of-type(n+6){display:none}
.about-show-more{
  display:inline-flex;align-items:center;gap:6px;
  margin:10px 0 0;padding:6px 12px;
  background:transparent;border:none;
  color:var(--accent);font-size:12.5px;font-weight:600;
  cursor:pointer;border-radius:var(--radius-sm);
  transition:background .15s,color .15s;
}
.about-show-more:hover{background:var(--accent-dim)}
.about-show-more i{font-size:10px;line-height:1;transition:transform .2s var(--ease)}
.about-show-more[hidden]{display:none}

/* ── Accordion fold: each About section is a collapsible card ─────
 * Header is a button that toggles is-open on the wrapper. The visi-pill
 * (when present) sits beside the toggle as a sibling so it doesn't fire
 * the fold. */
.about-fold{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .15s var(--ease);
}
.about-fold:hover{border-color:var(--border-hover)}
.about-fold.is-open{border-color:rgba(205,161,44,.30)}
.about-fold-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
}
.about-fold-toggle{
  flex:1;
  display:flex;align-items:center;gap:10px;
  padding:6px 8px;background:transparent;border:none;
  color:var(--text-primary);font-size:13.5px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;text-align:start;border-radius:var(--radius-sm);
  transition:background .15s,color .15s;
}
.about-fold-toggle:hover{background:var(--overlay-soft);color:var(--accent)}
.about-fold-glyph{font-size:14px;color:var(--text-muted);width:18px;text-align:center}
.about-fold.is-open .about-fold-glyph{color:var(--accent)}
.about-fold-title{flex:1}
.about-fold-chev{font-size:11px;color:var(--text-muted);transition:transform .25s var(--ease)}
.about-fold.is-open .about-fold-chev{transform:rotate(180deg);color:var(--accent)}
.about-fold-pill{margin:0;flex-shrink:0}
.about-fold-body{
  display:none;
  padding:6px 16px 14px;
  border-top:1px solid var(--border);
  background:var(--bg-card);
}
.about-fold.is-open .about-fold-body{display:block;animation:about-fold-in .22s var(--ease)}
@keyframes about-fold-in{
  from{opacity:0;transform:translateY(-4px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Complete-your-profile nudge — owner only */
.about-complete{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:14px 16px;margin:0 0 14px;
  background:var(--accent-dim);
  border:1px solid rgba(205,161,44,.30);
  border-radius:var(--radius-md);
}
.about-complete-icon{font-size:18px;color:var(--accent);flex-shrink:0;margin-top:2px}
.about-complete-text{flex:1;min-width:200px}
.about-complete-title{
  margin:0 0 6px;font-size:13.5px;font-weight:700;
  color:var(--text-primary);letter-spacing:.01em;
}
.about-complete-body{
  margin:0;font-size:12.5px;color:var(--text-secondary);line-height:1.6;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.about-complete-chip{
  display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:99px;
  background:var(--bg-surface);border:1px solid var(--border-hover);
  color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.02em;
}
.about-complete-cta{flex-shrink:0;align-self:center}

/* Per-tab counter — slim eyebrow at the top of each tab section */
.tab-count{
  text-align:center;
  font-size:11px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.1em;
  margin:0 0 16px;
}

/* ── Avatar preview modal ─────────────────────────────────────────
 * Glassy backdrop, gold-haloed frame, caption below. Whispers rather
 * than dominates — the photo is the focus. */
.avatar-preview-modal .modal-content{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
/* Light mode reuses the frosted-white .modal-content, which showed as white
 * gutters beside the photo. Keep the preview card transparent in EVERY theme
 * (higher specificity than the [data-theme="light"] .modal-content rule), and
 * shrink the dialog to the photo so there are no side gutters at all. */
[data-theme="light"] .avatar-preview-modal .modal-content{
  background:transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.avatar-preview-modal .modal-dialog{max-width:fit-content}
/* The global mobile bottom-sheet rule (≤575.98px) pins every .modal-dialog with
   position:fixed; inset-inline:0; margin:0 — and combined with our fit-content
   width that left-aligned the avatar lightbox (the shrunk dialog stuck to the
   start edge, leaving slack on the other side). The preview is a centred image
   viewer, not a bottom-sheet, so restore normal centred-modal positioning on
   mobile: position:relative neutralises the leftover inset offsets (all 0) and
   margin auto re-centres it symmetrically (RTL-safe). */
@media (max-width:575.98px){
  .avatar-preview-modal .modal-dialog{position:relative;margin:0.5rem auto}
}
.avatar-preview-content{
  display:flex;align-items:center;justify-content:center;
  padding:0;
  position:relative;
  background:transparent;
}
/* The frame IS the photo now — it tightly wraps the image (no surrounding
 * card or padding), rounds + clips it, and hosts the close button and the
 * caption as overlays. */
.avatar-preview-frame{
  position:relative;
  display:inline-block;
  line-height:0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(205,161,44,.35),0 24px 60px rgba(0,0,0,.55);
  animation:avatar-preview-in .35s var(--ease);
}
.avatar-preview-img{
  display:block;
  max-width:min(92vw,640px);max-height:86vh;
  width:auto;height:auto;
  object-fit:contain;
}
/* Username + subtitle overlaid on the bottom of the photo, on a soft
 * bottom-up gradient so the translucent text stays legible over any image. */
.avatar-preview-caption{
  position:absolute;inset-inline:0;bottom:0;
  padding:44px 18px 16px;
  text-align:center;line-height:1.3;
  background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,.30) 55%,transparent);
  pointer-events:none;
}
.avatar-preview-name{
  margin:0;font-size:19px;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.avatar-preview-sub{
  margin:3px 0 0;font-size:13px;font-weight:500;
  color:rgba(255,255,255,.72);
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.avatar-preview-close{
  position:absolute;top:12px;inset-inline-end:12px;
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:14px;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .15s,transform .15s,border-color .15s;
  z-index:10;
}
.avatar-preview-close:hover{
  background:var(--danger);border-color:var(--danger);
  transform:scale(1.05);
}
.avatar-preview-modal.show ~ .modal-backdrop,
.modal-backdrop.show{
  background:rgba(8,11,18,.50);
}
@supports (backdrop-filter: blur(10px)){
  .avatar-preview-modal.show ~ .modal-backdrop,
  .modal-backdrop.show{
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
  }
  /* Frosted-glass card: semi-transparent so backdrop blur bleeds through. */
  .modal-content{
    background:rgba(20,22,25,.82)!important;
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
  }
  .avatar-edit-content,
  .delete-account-content,
  .data-export-content{
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
  }
  [data-theme="light"] .modal-content{
    background:rgba(252,253,255,.88)!important;
  }
}
/* UI-25 — in light theme the frosted modal surface is near-white, but
 * Bootstrap's .btn-close-white inverts the X to white → invisible (measured on
 * 7 profile modals). Strip the white filter in light theme so the X reverts to
 * the dark default and is visible; dark theme keeps the white X on its dark
 * surface. Higher specificity than Bootstrap's rule, so no !important. */
[data-theme="light"] .btn-close-white{filter:none}
@keyframes avatar-preview-in{
  from{opacity:0;transform:scale(.92)}
  to  {opacity:1;transform:scale(1)}
}

/* ── Image positioning / crop / zoom editor (image-cropper.js) ──────────
 * Drag-to-reposition + zoom inside a fixed-aspect viewport; the visible
 * region is exactly what gets uploaded. Used by the avatar + every cover
 * picker. The viewport sizes to width × aspect (set inline by the engine),
 * so what the user frames is what is saved (WYSIWYG). */
.arch-cropper-mount{position:relative}
/* Cover pickers: while cropping, let the viewport define the box height
   (drop the dashed empty-state zone chrome). */
.arch-cover-pick.is-cropping .arch-cover-pick-zone{
  min-height:0;padding:0;border-style:solid;cursor:default;display:block;
}
.arch-cover-pick.is-cropping .arch-cover-pick-empty{display:none!important}
.arch-cropper-viewport{
  position:relative;display:block;width:100%;
  overflow:hidden;cursor:grab;touch-action:none;
  background:#0a0f16;border-radius:inherit;z-index:2;
}
.arch-cropper-viewport.is-grabbing{cursor:grabbing}
.arch-cropper-img{
  position:absolute;top:0;left:0;
  transform-origin:0 0;will-change:transform;
  max-width:none;max-height:none;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
/* Circular target for the avatar — dims everything outside the inscribed
   circle so the user knows what the round avatar will show. */
.arch-cropper-round-guide{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 9999px rgba(8,11,18,.55);
  outline:1px solid rgba(255,255,255,.4);outline-offset:-1px;
  pointer-events:none;z-index:3;
}
.arch-cropper-controls{
  display:flex;align-items:center;gap:10px;
  padding:10px 2px 2px;
}
.arch-cropper-zi{
  font-size:13px;color:var(--text-muted);cursor:pointer;
  flex-shrink:0;transition:color .15s;
}
.arch-cropper-zi:hover{color:var(--accent)}
/* Native range (accent-color) per the site's native-control rule. */
.arch-cropper-zoom{
  flex:1;min-width:80px;height:4px;
  accent-color:var(--accent);cursor:pointer;
}
/* Avatar: a square crop stage with the circular guide overlay. */
.avatar-crop-stage{width:220px;max-width:80%;margin:0 auto 4px;border-radius:16px;overflow:hidden}
.avatar-crop-stage + .arch-cropper-controls{width:220px;max-width:80%;margin:4px auto 16px}
.avatar-edit-change{display:flex;width:fit-content;margin:2px auto 14px;align-items:center;gap:6px}
.avatar-edit-change[hidden],.avatar-crop-stage[hidden]{display:none}
/* While cropping, drop the cover picker's static preview so only the
   interactive viewport shows. */
.arch-cover-pick.is-cropping .arch-cover-pick-preview{display:none}

/* ── Change-photo modal ──────────────────────────────────────────
 * Big circular dropzone with a gold-halo ring, drag-over state, and
 * a cloud-upload overlay that fades in on hover. */
.avatar-edit-content{
  position:relative;
  background:var(--bg-card)!important;
  border:1px solid var(--border-hover)!important;
  border-radius:var(--radius-lg)!important;
  padding:36px 32px 28px;
  overflow:hidden;
}
[data-theme="light"] .avatar-edit-content{
  background:var(--bg-card)!important;
}
.avatar-edit-content::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:280px;height:280px;border-radius:50%;
  background:transparent;
  pointer-events:none;
}
.avatar-edit-close{
  position:absolute;top:14px;inset-inline-end:14px;
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-hover);
  color:var(--text-secondary);font-size:13px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  z-index:5;
}
.avatar-edit-close:hover{
  background:var(--overlay-soft);
  color:var(--text-primary);
  border-color:var(--overlay-strong);
}
.avatar-edit-head{position:relative;text-align:center;margin-bottom:22px;z-index:2}
.avatar-edit-eyebrow{
  margin:0 0 4px;
  font-size:11px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.12em;
}
.avatar-edit-title{
  margin:0;font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:.01em;
}
.avatar-edit-form{margin:0;position:relative;z-index:2}

.avatar-dropzone{
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;cursor:pointer;
  position:relative;
}
.avatar-dropzone-input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.avatar-dropzone-ring{
  position:relative;
  width:200px;height:200px;border-radius:50%;
  padding:6px;
  background:conic-gradient(from 220deg,var(--accent) 0deg,rgba(205,161,44,.20) 120deg,var(--accent) 240deg,rgba(205,161,44,.20) 360deg);
  box-shadow:0 0 38px rgba(205,161,44,.20);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.avatar-dropzone:hover .avatar-dropzone-ring,
.avatar-dropzone.is-dragging .avatar-dropzone-ring{
  box-shadow:0 0 56px rgba(205,161,44,.40);
  transform:scale(1.02);
}
.avatar-dropzone-img{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;background:var(--bg-card);
  display:block;
}
.avatar-dropzone-overlay{
  position:absolute;inset:6px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(8,11,18,.66);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  opacity:0;transition:opacity .2s var(--ease);
  text-align:center;pointer-events:none;padding:0 14px;
}
.avatar-dropzone-overlay i{font-size:26px;color:var(--accent-hover)}
.avatar-dropzone:hover .avatar-dropzone-overlay,
.avatar-dropzone.is-dragging .avatar-dropzone-overlay{opacity:1}
.avatar-dropzone.is-dragging .avatar-dropzone-overlay{
  background:rgba(205,161,44,.28);
}

.avatar-edit-hint{
  margin:0 0 22px;text-align:center;
  font-size:12px;color:var(--text-muted);line-height:1.6;
  display:inline-flex;align-items:center;gap:6px;
  width:100%;justify-content:center;
}
.avatar-edit-hint i{color:var(--text-muted)}
.avatar-edit-actions{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
}

/* ── Delete-account modal ──────────────────────────────────────
 * Warning hero, consequences list, and a prominent download-your-data
 * card before the destructive button. Red accent throughout. */
.delete-account-content{
  position:relative;
  background:linear-gradient(180deg,rgba(178,62,61,.14) 0%,rgba(22,30,44,.86) 50%)!important;
  border:1px solid rgba(178,62,61,.30)!important;
  border-radius:var(--radius-lg)!important;
  padding:36px 30px 28px;
  overflow:hidden;
}
[data-theme="light"] .delete-account-content{
  background:linear-gradient(180deg,rgba(178,62,61,.16) 0%,rgba(255,255,255,.86) 50%)!important;
}
.delete-account-content::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(178,62,61,.20) 0%,transparent 65%);
  pointer-events:none;
}
.delete-account-close{
  position:absolute;top:14px;inset-inline-end:14px;
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-hover);
  color:var(--text-secondary);font-size:13px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  z-index:5;
}
.delete-account-close:hover{
  background:var(--overlay-soft);color:var(--text-primary);
  border-color:var(--overlay-strong);
}
.delete-account-hero{position:relative;text-align:center;margin-bottom:18px;z-index:2}
.delete-account-icon{
  width:60px;height:60px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(178,62,61,.30),transparent 65%);
  color:var(--danger);font-size:26px;
  margin:0 auto 12px;
  filter:drop-shadow(0 4px 14px rgba(178,62,61,.40));
}
.delete-account-eyebrow{
  margin:0 0 4px;font-size:11px;font-weight:700;color:var(--danger);
  text-transform:uppercase;letter-spacing:.12em;
}
.delete-account-title{
  margin:0 0 10px;font-size:22px;font-weight:700;color:var(--text-primary);
  letter-spacing:.01em;
}
.delete-account-body{
  margin:0 auto;font-size:13.5px;color:var(--text-secondary);line-height:1.6;max-width:420px;
}
.delete-account-list{
  list-style:none;padding:14px 18px;margin:0 0 18px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:8px;
  position:relative;z-index:2;
}
.delete-account-list li{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--text-secondary);line-height:1.4;
}
.delete-account-list li i{
  flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:rgba(178,62,61,.16);color:var(--danger);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;
}
.delete-account-download{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;margin:0 0 22px;
  background:var(--accent-dim);
  border:1px solid rgba(205,161,44,.40);
  border-radius:var(--radius-md);
  text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s;
  position:relative;z-index:2;
}
.delete-account-download:hover{
  background:var(--accent-dim);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.delete-account-download > i{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  background:var(--accent-dim);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;
}
.delete-account-download span{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.delete-account-download strong{font-size:13.5px;color:var(--text-primary);font-weight:700;letter-spacing:.01em}
.delete-account-download small{font-size:12px;color:var(--text-muted);line-height:1.5}
.delete-account-actions{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  position:relative;z-index:2;
}

/* ── Download-my-data preview modal ───────────────────────────
 * Stat tiles up top, then format cards (JSON / PDF) the user can pick. */
.data-export-content{
  position:relative;
  background:var(--bg-card)!important;
  border:1px solid var(--border-hover)!important;
  border-radius:var(--radius-lg)!important;
  padding:32px 28px 24px;
  overflow:hidden;
}
[data-theme="light"] .data-export-content{
  background:var(--bg-card)!important;
}
.data-export-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));
  gap:4px;margin:0 0 10px;
  padding:8px 10px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-md);
  position:relative;z-index:2;
}
.data-export-stat{
  text-align:center;padding:4px 2px;
}
.data-export-stat .n{
  font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.1;
  letter-spacing:.01em;
}
.data-export-stat .l{
  font-size:9.5px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-top:1px;
}
.data-export-formats{
  display:flex;flex-direction:column;gap:6px;
  margin:0 0 10px;position:relative;z-index:2;
}
.data-export-card{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:var(--bg-surface);
  border:1px solid var(--border-hover);
  border-radius:var(--radius-md);
  text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s;
}
.data-export-card:hover{
  background:var(--accent-dim);
  border-color:rgba(205,161,44,.55);
  transform:translateY(-1px);
}
.data-export-card-icon{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:var(--accent-dim);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
}
.data-export-card-icon i{line-height:1}
.data-export-card-text{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.data-export-card-text strong{font-size:13px;color:var(--text-primary);font-weight:700;letter-spacing:.01em}
.data-export-card-text small{font-size:11px;color:var(--text-muted);line-height:1.4}
.data-export-card-arrow{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:11px;line-height:1;
  border:1px solid var(--border-hover);
  background:transparent;padding:0;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.data-export-card-arrow i{line-height:1;display:block}
.data-export-card:hover .data-export-card-arrow{
  background:var(--accent);color:#1a1a1a;border-color:var(--accent);
  transform:scale(1.05);
}
/* The email card uses a <form> as the .data-export-card. Keep the same
 * row layout — submit button is the arrow disc. */
.data-export-card-form{margin:0}

/* ── Arch form shell (modal-style hero + section cards) — used site-wide ─ */
.arch-form-shell{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border-hover);
  border-radius:var(--radius-lg);
  padding:36px 32px 28px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);
  overflow:hidden;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}
[data-theme="light"] .arch-form-shell{
  background:var(--bg-card);
}
.arch-form-shell::before{
  content:"";position:absolute;top:-110px;left:50%;transform:translateX(-50%);
  width:320px;height:320px;border-radius:50%;
  background:transparent;
  pointer-events:none;z-index:0;
}
.arch-form-hero{
  position:relative;z-index:2;
  text-align:center;
  margin-bottom:26px;padding-bottom:22px;
  border-bottom:1px solid var(--border);
}
.arch-form-hero .arch-modal-icon{margin-bottom:14px}
.arch-form-sub{
  margin:8px auto 0;font-size:13px;color:var(--text-secondary);
  line-height:1.6;max-width:480px;
}
.arch-form-grid{margin:0;position:relative;z-index:2}
.arch-form-section{
  margin-bottom:22px;padding-bottom:18px;
  border-bottom:1px dashed var(--border);
}
.arch-form-section:last-of-type{border-bottom:none;padding-bottom:6px}
.arch-form-section-label{
  font-size:11px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.10em;
  margin:0 0 14px;
  display:flex;align-items:center;gap:8px;
}
.arch-form-section-label i{font-size:11px}
.arch-form-section-hint{
  font-size:12px;color:var(--text-muted);margin:-8px 0 12px;line-height:1.55;
}
/* Thin muted divider drawn between individual fields inside a section,
 * so each piece of data reads as its own row. Uses border-top instead
 * of <hr> so it inherits theme tokens and doesn't add layout margin. */
.arch-form-field-divider{
  border:0;border-top:1px solid var(--border);
  opacity:.55;margin:14px 0 14px;height:0;
}
/* Inline notice used when a field is disabled because the user can't
 * fill it (e.g. no offices yet). Sits directly under the muted input. */
.arch-form-field-note{
  font-size:12px;color:var(--text-muted);margin:6px 0 0;
  display:flex;align-items:flex-start;gap:6px;line-height:1.55;
}
.arch-form-field-note i{color:var(--accent);font-size:11px;margin-top:3px;flex-shrink:0}

/* External inspirations — repeating rows in the project form. Pattern
 * mirrors applicant notes (one row under another, X-button per row).
 * Each row carries a square photo slot, three text inputs stacked, and
 * the remove control on the far right. */
.arch-ext-insp{display:flex;flex-direction:column;gap:10px;margin:6px 0 10px}
.arch-ext-insp-row{
  border:1px solid var(--border);border-radius:12px;
  background:var(--bg-card);padding:10px 12px;
}
.arch-ext-insp-grid{
  display:grid;grid-template-columns:88px 1fr 32px;
  gap:12px;align-items:start;
}
.arch-ext-insp-thumb{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;margin:0;
}
.arch-ext-insp-thumb-preview{
  width:88px;height:88px;border-radius:10px;
  background:var(--bg-deep) center/cover no-repeat;
  border:1px dashed var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:24px;
  transition:border-color var(--dur-fast) var(--ease);
}
.arch-ext-insp-thumb:hover .arch-ext-insp-thumb-preview{border-color:var(--accent)}
.arch-ext-insp-thumb-hint{
  font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;
}
.arch-ext-insp-fields{display:flex;flex-direction:column;gap:6px;min-width:0}
.arch-ext-insp-fields .form-control{font-size:14px}
.arch-ext-insp-remove{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border);background:transparent;color:var(--text-secondary);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.arch-ext-insp-remove:hover{border-color:#e9647a;color:#e9647a;background:rgba(233,100,122,.08)}
.arch-ext-insp-add{margin-top:4px}
.arch-ext-insp-add.is-disabled,.arch-ext-insp-add:disabled{
  opacity:.45;cursor:not-allowed;pointer-events:none;
}

/* ── Cover picker — drop-zone replacement for ClearableFileInput ─────
 * Hides Django's default file-input chrome (`Currently: link [Clear]
 * Change: file`) and shows a styled zone with a live preview, an empty
 * state, and a Remove button. The actual <input type="file"> stays in
 * the DOM (visually hidden) so the form submits normally. */
.arch-cover-pick{margin:0 0 6px;display:flex;flex-direction:column;align-items:stretch}
.arch-cover-pick-actions{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.arch-cover-pick-inputs,
.arch-cover-pick-inputs *{display:none!important}
.arch-cover-pick-hint{font-size:11.5px;color:var(--text-muted);margin-top:6px}
.arch-cover-pick-zone{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:160px;
  border:2px dashed var(--border-hover);border-radius:var(--radius-md);
  background:var(--bg-surface);cursor:pointer;overflow:hidden;
  transition:border-color .15s,background .15s,box-shadow .25s var(--ease);
}
.arch-cover-pick-zone:hover,
.arch-cover-pick-zone:focus-visible,
.arch-cover-pick.is-dragover .arch-cover-pick-zone{
  border-color:var(--accent);background:var(--accent-dim);
  box-shadow:0 0 0 3px rgba(205,161,44,.10);outline:none;
}
.arch-cover-pick-preview{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.arch-cover-pick-preview img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.arch-cover-pick-empty{position:relative;z-index:1;text-align:center;color:var(--text-muted);padding:18px;line-height:1.5}
.arch-cover-pick-empty i{font-size:30px;color:var(--accent);margin-bottom:10px;display:block}
.arch-cover-pick-empty p{margin:0 0 4px;font-size:13.5px;color:var(--text-secondary);font-weight:500}
.arch-cover-pick-empty small{font-size:11.5px;color:var(--text-muted)}
.arch-cover-pick.has-preview .arch-cover-pick-empty{
  /* When a preview is showing, fade the empty hint out. It still loads
   * for screen readers but doesn't compete visually with the image. */
  position:absolute;inset:auto 14px 14px auto;background:rgba(0,0,0,.55);
  color:#fff;padding:6px 12px;border-radius:99px;font-size:11px;font-weight:600;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;
  transition:opacity .15s;
}
.arch-cover-pick.has-preview .arch-cover-pick-zone:hover .arch-cover-pick-empty{opacity:1}
.arch-cover-pick.has-preview .arch-cover-pick-empty i,
.arch-cover-pick.has-preview .arch-cover-pick-empty small{display:none}
.arch-cover-pick.has-preview .arch-cover-pick-empty p{font-size:11px;color:#fff;font-weight:600;margin:0}
.arch-cover-pick-filename{font-size:12px;color:var(--text-muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Match the Replace and Remove buttons exactly — same min-width,
 * same height, same font + padding — so the action row reads as a
 * symmetric pair instead of a wide-thin split. */
.arch-cover-pick-choose,
.arch-cover-pick-remove{
  font-size:12px;padding:5px 14px;height:32px;min-width:140px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.arch-cover-pick-remove[hidden]{display:none}

/* ── Attachments picker — shared by add + edit project forms ─────────
 * Drop-zone for new files; staged-file chips appear below as the user
 * picks them. Existing project attachments (edit form only) are
 * rendered separately above as `.arch-attach-current` chips. */
.arch-attach-pick-input{display:none}
.arch-attach-pick-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 22px;text-align:center;
  border:1px dashed var(--border-hover);border-radius:var(--radius-md);
  background:var(--bg-surface);cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .25s var(--ease);
}
.arch-attach-pick-zone:hover,
.arch-attach-pick-zone:focus-visible,
.arch-attach-pick.is-dragover .arch-attach-pick-zone{
  border-color:var(--accent);background:var(--accent-dim);
  box-shadow:0 0 0 3px rgba(205,161,44,.10);outline:none;
}
.arch-attach-pick-zone i{font-size:26px;color:var(--accent);margin-bottom:8px}
.arch-attach-pick-title{font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:4px;letter-spacing:.01em}
.arch-attach-pick-zone small{font-size:11.5px;color:var(--text-muted)}

/* Staged-files list — shown after the user picks files but before submit. */
/* Project staged tray — tile grid (same shape as the post composer's
 * .file-preview-tray) so a project attachment preview reads like a
 * post one. Each tile is a .file-preview-tile with a real image
 * thumb (or colour-coded badge) on top and project-only kind cycler
 * pill at the bottom. */
.arch-attach-staged{
  list-style:none;padding:0;margin:12px 0 0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.arch-attach-staged[hidden]{display:none}
.arch-staged-tile{width:120px}
.arch-staged-kind-foot{
  padding:6px 8px 8px;border-top:1px solid var(--border);justify-content:center;
}
.arch-staged-kind-foot .arch-staged-kind{width:100%;justify-content:center}
/* Legacy .arch-attach-staged li pill-row styles were removed — they
 * had higher specificity than .file-preview-tile and were forcing the
 * old horizontal pill layout regardless of class. Tiles now inherit
 * the post-composer's .file-preview-tile styling cleanly. */

/* Existing-attachments chip list — used on the edit form to show what
 * the project already has attached. Mirrors the Files-tray badge palette
 * (per-extension colour) so editors recognise file types at a glance. */
.arch-attach-current{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 14px}
/* Existing-attachment tiles — server-rendered .file-preview-tile.
 * The thumb is a clickable link that opens the file at full size;
 * the name in the meta block is also a link. Both stay subtle at
 * rest, gold on hover, no underline (matches site links). */
.arch-attach-current .file-preview-thumb{text-decoration:none}
.arch-attach-current a.file-preview-name{
  color:var(--text-primary);text-decoration:none;
  transition:color var(--dur-fast) var(--ease);
}
.arch-attach-current a.file-preview-name:hover{color:var(--accent)}
.arch-attach-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:99px;padding:4px 6px 4px 4px;
  transition:border-color .15s,box-shadow .25s var(--ease);
  max-width:100%;
}
.arch-attach-chip:hover{border-color:rgba(205,161,44,.45);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.arch-attach-chip-thumb{
  width:40px;height:40px;border-radius:8px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
}
.arch-attach-chip-badge{
  border-radius:50%;
  background:linear-gradient(135deg,var(--cat-c) 0%,var(--cat-c-dark) 100%);
  --cat-c:#475569;--cat-c-dark:#334155;
  width:30px;height:30px;
}
/* Image attachments render as a real thumbnail in the chip slot. */
.arch-attach-chip-img{
  background:var(--bg-deep);border:1px solid var(--border);
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.arch-attach-chip-img img{width:100%;height:100%;object-fit:cover;display:block}
.arch-attach-chip-img:hover{border-color:var(--accent);transform:translateY(-1px)}
.arch-attach-chip-ext{font-size:9px;font-weight:800;color:#fff;letter-spacing:.04em;text-transform:uppercase;font-family:'Poppins',system-ui,sans-serif;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.arch-attach-chip-name{font-size:12px;font-weight:500;color:var(--text-primary);text-decoration:none;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-attach-chip-name:hover{color:var(--accent)}
.arch-attach-chip-remove{
  width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:11px;text-decoration:none;
  transition:background .15s,color .15s;
}
.arch-attach-chip-remove:hover{background:rgba(248,113,113,.15);color:var(--danger)}
/* Per-extension colours — same palette as view_post / view_project. */
.arch-attach-chip-badge[data-ext="pdf"]{--cat-c:#ef4444;--cat-c-dark:#b91c1c}
.arch-attach-chip-badge[data-ext="doc"],.arch-attach-chip-badge[data-ext="docx"],.arch-attach-chip-badge[data-ext="rtf"],.arch-attach-chip-badge[data-ext="odt"]{--cat-c:#2563eb;--cat-c-dark:#1d4ed8}
.arch-attach-chip-badge[data-ext="txt"]{--cat-c:#64748b;--cat-c-dark:#475569}
.arch-attach-chip-badge[data-ext="xls"],.arch-attach-chip-badge[data-ext="xlsx"],.arch-attach-chip-badge[data-ext="csv"],.arch-attach-chip-badge[data-ext="ods"]{--cat-c:#16a34a;--cat-c-dark:#15803d}
.arch-attach-chip-badge[data-ext="ppt"],.arch-attach-chip-badge[data-ext="pptx"],.arch-attach-chip-badge[data-ext="odp"]{--cat-c:#f97316;--cat-c-dark:#c2410c}
.arch-attach-chip-badge[data-ext="dwg"],.arch-attach-chip-badge[data-ext="dxf"],.arch-attach-chip-badge[data-ext="rvt"],.arch-attach-chip-badge[data-ext="rfa"]{--cat-c:#eab308;--cat-c-dark:#a16207}
.arch-attach-chip-badge[data-ext="skp"],.arch-attach-chip-badge[data-ext="3dm"],.arch-attach-chip-badge[data-ext="ifc"]{--cat-c:#0ea5e9;--cat-c-dark:#0369a1}
.arch-attach-chip-badge[data-ext="obj"],.arch-attach-chip-badge[data-ext="stl"],.arch-attach-chip-badge[data-ext="dae"],.arch-attach-chip-badge[data-ext="gh"]{--cat-c:#10b981;--cat-c-dark:#047857}
.arch-attach-chip-badge[data-ext="psd"]{--cat-c:#1d4ed8;--cat-c-dark:#1e3a8a}
.arch-attach-chip-badge[data-ext="ai"],.arch-attach-chip-badge[data-ext="eps"]{--cat-c:#fb923c;--cat-c-dark:#c2410c}
.arch-attach-chip-badge[data-ext="indd"]{--cat-c:#be185d;--cat-c-dark:#831843}
.arch-attach-chip-badge[data-ext="zip"],.arch-attach-chip-badge[data-ext="rar"],.arch-attach-chip-badge[data-ext="7z"],.arch-attach-chip-badge[data-ext="tar"],.arch-attach-chip-badge[data-ext="gz"]{--cat-c:#a855f7;--cat-c-dark:#7e22ce}
.arch-attach-chip-badge[data-ext="mp4"],.arch-attach-chip-badge[data-ext="mov"],.arch-attach-chip-badge[data-ext="webm"],.arch-attach-chip-badge[data-ext="mkv"]{--cat-c:#db2777;--cat-c-dark:#9d174d}
.arch-attach-chip-badge[data-ext="mp3"],.arch-attach-chip-badge[data-ext="wav"],.arch-attach-chip-badge[data-ext="ogg"],.arch-attach-chip-badge[data-ext="m4a"]{--cat-c:#06b6d4;--cat-c-dark:#0e7490}
.arch-attach-chip-badge[data-ext="jpg"],.arch-attach-chip-badge[data-ext="jpeg"],.arch-attach-chip-badge[data-ext="png"],.arch-attach-chip-badge[data-ext="webp"],.arch-attach-chip-badge[data-ext="gif"]{--cat-c:#8b5cf6;--cat-c-dark:#6d28d9}

/* Map picker container — Leaflet renders into this. */
.arch-map-pick{
  position:relative;height:260px;border-radius:var(--radius-md);
  overflow:hidden;border:1px solid var(--border);
  background:var(--bg-surface);margin-top:8px;
}
.arch-map-pick .leaflet-container{height:100%;width:100%;background:var(--bg-surface)}
.arch-map-pick-hint{
  font-size:12px;color:var(--text-muted);margin:6px 0 0;line-height:1.55;
}
/* Situ checkbox that appears below the project map picker */
.situ-pin-check-wrap{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 14px;
  background:var(--bg-surface);
  transition:border-color .15s, opacity .15s;
}
.situ-pin-check-wrap.is-no-pin{
  opacity:.5;
  pointer-events:none;
  cursor:default;
}
.situ-pin-check-label{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:0;
}
.situ-pin-check-label input[type="checkbox"]{
  margin-top:3px;flex-shrink:0;
}
.situ-pin-check-body{display:flex;flex-direction:column;gap:2px}
.situ-pin-check-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.situ-pin-check-title i{color:var(--accent);margin-right:4px}
.situ-pin-check-hint{font-size:12px;color:var(--text-muted);line-height:1.5}
.situ-linked-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);font-size:13px}
.situ-linked-note__info{flex:1;min-width:0}
/* ── Global: hide native browser spinner arrows on ALL number inputs ──
 * The site uses .num-stepper (stacked ↑↓ chevrons) or .arch-stepper
 * (±  side buttons) for any input that needs increment controls. Native
 * spinners are inconsistent across browsers and clash with the dark theme. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── Native date / time inputs — browser chrome theming ───────────────────
 * Without color-scheme the browser renders the calendar picker indicator
 * (the small icon inside the input) and the native popup using light-mode
 * colours, making the icon invisible on our dark surfaces.
 * Setting color-scheme:dark tells the browser to render those controls with
 * light-coloured chrome so they remain visible against dark backgrounds.
 * The light-mode override restores the standard dark icon on white.       */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"]{color-scheme:dark}
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="month"],
[data-theme="light"] input[type="week"]{color-scheme:light}

/* Calendar picker indicator — tint to the gold accent so it reads as an
 * intentional site element rather than a raw browser widget.
 * Dark mode: browser renders a white icon (from color-scheme:dark), then
 *   sepia+hue-rotate shifts it toward warm gold.
 * Light mode: the indicator is dark by default; we apply the same recipe
 *   at lower opacity for a muted gold tint on the white background.       */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.60;border-radius:3px;
  filter:sepia(1) saturate(2.2) hue-rotate(5deg) brightness(.88);
  transition:opacity .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1) sepia(1) saturate(2.2) hue-rotate(5deg) brightness(.65);
  opacity:.65;
}

/* Custom number stepper — matches arch-form-shell input chrome. We
 * hide the native browser spinners (which are tiny + clash with the
 * dark theme) and provide explicit -/+ buttons on either side. */
.arch-stepper{
  display:flex;align-items:stretch;gap:0;
  border:1px solid var(--border);border-radius:var(--radius-md);
  overflow:hidden;background:var(--bg-input,rgba(255,255,255,.04));
  transition:border-color .15s var(--ease),box-shadow .2s var(--ease);
}
.arch-stepper:focus-within{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(205,161,44,.14);
}
.arch-stepper .arch-stepper-btn{
  flex:0 0 38px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  border:none;color:var(--accent);font-size:14px;line-height:1;
  cursor:pointer;user-select:none;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.arch-stepper .arch-stepper-btn:hover{
  background:rgba(205,161,44,.22);
}
.arch-stepper .arch-stepper-btn:active{transform:scale(.96)}
.arch-stepper .arch-stepper-btn[disabled]{opacity:.4;cursor:not-allowed}
.arch-stepper .arch-stepper-input{
  flex:1 1 auto;border:none!important;border-radius:0!important;
  background:transparent!important;text-align:center;
  box-shadow:none!important;
  -moz-appearance:textfield;
}
.arch-stepper .arch-stepper-input::-webkit-outer-spin-button,
.arch-stepper .arch-stepper-input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.arch-stepper .arch-stepper-suffix{
  flex:0 0 auto;align-self:stretch;display:flex;align-items:center;
  padding:0 12px;font-size:12px;color:var(--text-muted);
  border-left:1px solid var(--border);background:rgba(0,0,0,.05);
}
.arch-stepper .arch-stepper-suffix select{
  border:none!important;background:transparent!important;
  box-shadow:none!important;color:var(--text-primary);
  font-size:12px;padding:0 4px;cursor:pointer;
}
/* Attribution banners — pending review notices on view_project.
 * Two flavours: a soft indigo "pending" line for the project creator,
 * and a gold "approval needed" strip with action buttons for the
 * named on-site party. */
.arch-attribution-pending{
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);
  border-radius:10px;padding:10px 16px;margin-bottom:12px;
  font-size:13px;color:#818cf8;line-height:1.5;
}
.arch-attribution-pending i{margin-right:6px}
.arch-attribution-action{
  background:rgba(205,161,44,.12);border:1px solid rgba(205,161,44,.3);
  border-radius:10px;padding:14px 18px;margin-bottom:12px;
  font-size:13px;color:var(--accent);line-height:1.5;
  display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;
}
.arch-attribution-action i{margin-right:6px}
/* Chip list — used by the "In cooperation with" pickers. The search
 * select sits above; chosen items render as removable chips below. */
.arch-chip-list{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;min-height:8px;
}
.arch-chip-list:empty{display:none}
.arch-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px 6px 12px;
  border-radius:999px;
  background:var(--accent-dim);
  border:1px solid rgba(205,161,44,.32);
  color:var(--text-primary);font-size:13px;line-height:1;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.arch-chip:hover{
  background:rgba(205,161,44,.18);
  border-color:var(--accent);
}
.arch-chip i{color:var(--accent);font-size:11px}
.arch-chip-label{font-weight:500}
.arch-chip-remove{
  background:transparent;border:0;color:var(--text-muted);cursor:pointer;
  font-size:16px;line-height:1;padding:0 2px;border-radius:50%;
  transition:color .15s var(--ease),background .15s var(--ease);
}
.arch-chip-remove:hover{
  color:#fff;background:rgba(239,68,68,.7);
}
.arch-form-actions{
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--border);
  position:relative;z-index:2;
}

/* Polish — inputs/textareas inside the arch-form shell get a slightly more
 * generous, more refined treatment: bigger comfy height, accent-tinted
 * border on hover/focus, and a soft halo while focused. */
.arch-form-shell .form-control,
.arch-form-shell .form-select,
.arch-form-shell input[type=text],
.arch-form-shell input[type=email],
.arch-form-shell input[type=tel],
.arch-form-shell input[type=url],
.arch-form-shell input[type=number],
.arch-form-shell input[type=date],
.arch-form-shell input[type=password],
.arch-form-shell select,
.arch-form-shell textarea{
  height:36px;
  padding:0 12px;
  font-size:12.5px;
  background:rgba(26,36,54,.28)!important;
  color:var(--text-primary)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:var(--radius-md)!important;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.18);
  transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .2s var(--ease);
}
[data-theme="light"] .arch-form-shell .form-control,
[data-theme="light"] .arch-form-shell .form-select,
[data-theme="light"] .arch-form-shell input[type=text],
[data-theme="light"] .arch-form-shell input[type=email],
[data-theme="light"] .arch-form-shell input[type=tel],
[data-theme="light"] .arch-form-shell input[type=url],
[data-theme="light"] .arch-form-shell input[type=number],
[data-theme="light"] .arch-form-shell input[type=date],
[data-theme="light"] .arch-form-shell input[type=password],
[data-theme="light"] .arch-form-shell select,
[data-theme="light"] .arch-form-shell textarea{
  background:rgba(255,255,255,.45)!important;
  border-color:rgba(0,0,0,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.06);
}
.arch-form-shell textarea{
  height:auto;min-height:80px;padding:9px 12px;line-height:1.5;
}
.arch-form-shell .form-control:hover,
.arch-form-shell .form-select:hover,
.arch-form-shell select:hover,
.arch-form-shell input:not([type=checkbox]):not([type=radio]):hover,
.arch-form-shell textarea:hover{
  border-color:rgba(205,161,44,.35)!important;
  background:rgba(26,36,54,.34)!important;
}
[data-theme="light"] .arch-form-shell .form-control:hover,
[data-theme="light"] .arch-form-shell input:not([type=checkbox]):not([type=radio]):hover,
[data-theme="light"] .arch-form-shell textarea:hover,
[data-theme="light"] .arch-form-shell select:hover{
  background:rgba(255,255,255,.60)!important;
}
.arch-form-shell .form-control:focus,
.arch-form-shell .form-select:focus,
.arch-form-shell select:focus,
.arch-form-shell input:not([type=checkbox]):not([type=radio]):focus,
.arch-form-shell textarea:focus{
  border-color:var(--accent)!important;
  background:rgba(26,36,54,.40)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 3px rgba(205,161,44,.14)!important;
  outline:none!important;
}
[data-theme="light"] .arch-form-shell .form-control:focus,
[data-theme="light"] .arch-form-shell input:focus,
[data-theme="light"] .arch-form-shell textarea:focus,
[data-theme="light"] .arch-form-shell select:focus{
  background:rgba(255,255,255,.75)!important;
}
.arch-form-shell .form-control::placeholder,
.arch-form-shell input::placeholder,
.arch-form-shell textarea::placeholder{
  color:var(--text-muted)!important;
  font-size:12px;
}

/* Bootstrap-datepicker-plus input group — make the addon a glassy gold tile */
.arch-form-shell .input-group.dbdp{
  position:relative;
  flex-wrap:nowrap;
}
.arch-form-shell .input-group.dbdp > .form-control{
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important;
  border-right:none!important;
}
.arch-form-shell .input-group.dbdp .input-group-addon,
.arch-form-shell .input-group.dbdp .input-group-text,
.arch-form-shell .input-group.dbdp .input-group-append{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:36px;
  margin:0;padding:0;
  background:var(--accent-dim)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-left:none!important;
  border-top-left-radius:0!important;
  border-bottom-left-radius:0!important;
  border-top-right-radius:var(--radius-md)!important;
  border-bottom-right-radius:var(--radius-md)!important;
  color:var(--accent)!important;
  font-size:14px;
  cursor:pointer;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .2s var(--ease);
}
.arch-form-shell .input-group.dbdp:hover .input-group-text,
.arch-form-shell .input-group.dbdp:focus-within .input-group-text{
  background:rgba(205,161,44,.22)!important;
  border-color:var(--accent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 3px rgba(205,161,44,.14);
}
.arch-form-shell .input-group.dbdp:focus-within > .form-control{
  border-color:var(--accent)!important;
  box-shadow:none!important;
}
.arch-form-shell .input-group.dbdp .input-group-text > i{
  font-size:14px;line-height:1;color:var(--accent);
}
[data-theme="light"] .arch-form-shell .input-group.dbdp .input-group-text{
  background:rgba(184,134,42,.12)!important;
  border-color:rgba(0,0,0,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="light"] .arch-form-shell .input-group.dbdp .input-group-text > i{color:#b8862a}

/* RTL flip for the date-picker input-group. Bootstrap stacks
 * .form-control + .input-group-text using physical right/left edges.
 * In LTR the calendar tile sits to the right of the input. Under
 * Arabic (dir="rtl") the visual order reverses — Bootstrap reorders
 * the children in the flex container, but the bespoke border-radius
 * + border-right-removal rules above were written for LTR only, so
 * the field ended up with rounded corners on the wrong side and the
 * calendar tile orphaned with mismatched corners. These overrides
 * mirror the chrome so the tile snaps cleanly back onto the
 * RTL-flipped input. */
[dir="rtl"] .arch-form-shell .input-group.dbdp > .form-control{
  border-top-right-radius:var(--radius-md)!important;
  border-bottom-right-radius:var(--radius-md)!important;
  border-top-left-radius:0!important;
  border-bottom-left-radius:0!important;
  border-right:1px solid var(--border-hover)!important;
  border-left:none!important;
}
[dir="rtl"] .arch-form-shell .input-group.dbdp .input-group-addon,
[dir="rtl"] .arch-form-shell .input-group.dbdp .input-group-text,
[dir="rtl"] .arch-form-shell .input-group.dbdp .input-group-append{
  border-right:none!important;
  border-left:1px solid rgba(255,255,255,.10)!important;
  border-top-left-radius:var(--radius-md)!important;
  border-bottom-left-radius:var(--radius-md)!important;
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important;
}

/* The bootstrap-datetimepicker popup itself: pin its internal
 * direction to LTR so the day grid (Sun → Sat across the row) reads
 * correctly even on an RTL page. The labels translate fine; the
 * navigation chevrons + grid layout are LTR-by-design and look
 * broken when force-mirrored. The dropdown menu's POSITION still
 * follows Bootstrap's RTL-aware placement — only the inner widget
 * is locked. */
[dir="rtl"] .bootstrap-datetimepicker-widget.dropdown-menu{
  direction:ltr;
  text-align:left;
}
[dir="rtl"] .bootstrap-datetimepicker-widget table{direction:ltr}

/* ── Site-wide RTL audit fixes ─────────────────────────────────────
 * Catches the residual physical-property leaks that show up when the
 * page renders under dir="rtl". Each rule below targets ONE specific
 * mismatch the audit found; new ones can land here as more bugs
 * surface. */

/* Directional FontAwesome icons — flip every "right" / "left" arrow
 * & chevron so a "next page" button points the right way (toward the
 * start of the next page in reading order, not always east). Targets
 * the icons that semantically mean "forward" / "back" — drop-down
 * chevrons (.fa-chevron-down/up) are NOT flipped, since up/down
 * direction is unaffected by writing direction. */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-circle-arrow-right,
[dir="rtl"] .fa-circle-arrow-left,
[dir="rtl"] .fa-arrow-right-from-bracket,
[dir="rtl"] .fa-arrow-left-from-bracket,
[dir="rtl"] .fa-arrow-right-long,
[dir="rtl"] .fa-arrow-left-long,
[dir="rtl"] .fa-arrow-up-right-from-square,
[dir="rtl"] .fa-rotate-left{
  transform:scaleX(-1);
}

/* Bell preview rows — the 3 px transparent "unread strip" sat on the
 * left edge in LTR (so the gold accent painted on hover read as a
 * leading marker). In RTL the leading edge is the right side; flip
 * the strip's side so unread rows still read with the marker on the
 * leading edge instead of trailing. */
[dir="rtl"] .nav-popover-item-wrap{
  border-left:1px solid var(--border);
  border-right:3px solid transparent;
}

/* Group-conversation sidebar separator — flips to the start side. */
[dir="rtl"] .arch-form-section .input-group:not(.dbdp) > .form-control{
  /* No physical border tweaks needed for the plain (non-dbdp) input-
   * groups — Bootstrap's stylesheet already handles the flip via
   * its built-in dir-aware rules. Empty rule kept as a doc anchor
   * for future RTL form-group tweaks. */
}

/* select2 dropdown arrow — flips to mirror the inline chevron. The
 * widget itself respects document direction for text alignment, but
 * the open-indicator arrow stays at a fixed physical edge. */
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow{
  right:auto;left:8px;
}
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-right:12px;padding-left:30px;text-align:right;
}

/* Generic class hook — apply `.no-rtl-flip` to any directional icon
 * that should NOT be mirrored (e.g. a media-skip icon where the
 * physical right means "fast-forward" regardless of writing order). */
[dir="rtl"] .no-rtl-flip,
[dir="rtl"] .no-rtl-flip .fa-arrow-right,
[dir="rtl"] .no-rtl-flip .fa-arrow-left,
[dir="rtl"] .no-rtl-flip .fa-chevron-right,
[dir="rtl"] .no-rtl-flip .fa-chevron-left{
  transform:none;
}

/* Datepicker popup is already forced to direction:ltr internally, so the
 * global RTL chevron-flip rule would double-flip the prev/next arrows.
 * Cancel it here for the datepicker context only. */
[dir="rtl"] .bootstrap-datetimepicker-widget .fa-chevron-right,
[dir="rtl"] .bootstrap-datetimepicker-widget .fa-chevron-left{
  transform:none;
}

/* ── Bootstrap-datetimepicker popup — frosted glass + gold accents ── */
.bootstrap-datetimepicker-widget.dropdown-menu{
  background:rgba(22,30,44,.78)!important;
  border:1px solid var(--border-hover)!important;
  border-radius:var(--radius-lg)!important;
  padding:10px!important;
  box-shadow:0 24px 60px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  color:var(--text-primary);
  width:auto;min-width:230px;
}
.bootstrap-datetimepicker-widget.dropdown-menu::before,
.bootstrap-datetimepicker-widget.dropdown-menu::after{display:none!important}
.bootstrap-datetimepicker-widget table{margin:0;color:var(--text-primary)}
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th{
  border:none!important;text-align:center;
  height:30px;line-height:30px;width:30px;
  font-size:12px;
  border-radius:8px;
  transition:background .12s var(--ease),color .12s var(--ease),box-shadow .15s var(--ease);
}
.bootstrap-datetimepicker-widget table th{
  color:var(--text-muted);font-weight:600;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
}
.bootstrap-datetimepicker-widget table th.picker-switch{
  color:var(--accent);font-weight:700;font-size:12px;letter-spacing:.04em;
  text-transform:none;
  border-radius:8px;
  padding:0 10px;
}
.bootstrap-datetimepicker-widget table th.prev,
.bootstrap-datetimepicker-widget table th.next{
  color:var(--text-secondary);
  font-size:16px;
  cursor:pointer;
  width:36px;
}
.bootstrap-datetimepicker-widget table th.prev span,
.bootstrap-datetimepicker-widget table th.next span{
  font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.bootstrap-datetimepicker-widget table th.prev:hover,
.bootstrap-datetimepicker-widget table th.next:hover,
.bootstrap-datetimepicker-widget table th.picker-switch:hover{
  background:rgba(205,161,44,.14)!important;color:var(--accent)!important;
}
.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover{
  color:var(--text-muted)!important;background:transparent!important;cursor:not-allowed;
}
.bootstrap-datetimepicker-widget table td.day{
  color:var(--text-primary);cursor:pointer;
}
.bootstrap-datetimepicker-widget table td.day.old,
.bootstrap-datetimepicker-widget table td.day.new{
  color:var(--text-muted);opacity:.55;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover,
.bootstrap-datetimepicker-widget table td span:hover{
  background:rgba(205,161,44,.16)!important;color:var(--accent)!important;
}
.bootstrap-datetimepicker-widget table td.today{
  position:relative;
  color:var(--accent)!important;font-weight:700;
}
.bootstrap-datetimepicker-widget table td.today::after{
  content:"";position:absolute;
  bottom:4px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;
  background:var(--accent);
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active,
.bootstrap-datetimepicker-widget table td span.active:hover{
  background:linear-gradient(180deg,rgba(205,161,44,.85),rgba(205,161,44,.65))!important;
  color:#1a1a1a!important;font-weight:700;
  box-shadow:0 4px 12px rgba(205,161,44,.30),
             inset 0 1px 0 rgba(255,255,255,.30);
  text-shadow:none;
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover{
  color:var(--text-muted)!important;opacity:.35;
  background:transparent!important;cursor:not-allowed;
}
.bootstrap-datetimepicker-widget .datepicker-months td span,
.bootstrap-datetimepicker-widget .datepicker-years td span,
.bootstrap-datetimepicker-widget .datepicker-decades td span{
  width:48px;height:36px;line-height:36px;margin:3px;
  border-radius:8px;font-size:12px;
  color:var(--text-primary);
}
.bootstrap-datetimepicker-widget .datepicker-months td span.old,
.bootstrap-datetimepicker-widget .datepicker-years td span.old,
.bootstrap-datetimepicker-widget .datepicker-decades td span.old{
  color:var(--text-muted);opacity:.55;
}
.bootstrap-datetimepicker-widget .timepicker-picker td a,
.bootstrap-datetimepicker-widget .timepicker-hours td,
.bootstrap-datetimepicker-widget .timepicker-minutes td{
  color:var(--text-primary);border-radius:8px;
}
.bootstrap-datetimepicker-widget .timepicker-picker td a:hover{
  background:rgba(205,161,44,.16)!important;color:var(--accent)!important;
}
.bootstrap-datetimepicker-widget .separator{color:var(--text-muted)}
.bootstrap-datetimepicker-widget a[data-action]{color:var(--accent)}
.bootstrap-datetimepicker-widget .btn[data-action="togglePicker"]{
  background:transparent;color:var(--accent);border:1px solid var(--border);
}
.bootstrap-datetimepicker-widget .picker-switch.accordion-toggle .btn{
  width:100%;
}
[data-theme="light"] .bootstrap-datetimepicker-widget.dropdown-menu{
  background:rgba(255,255,255,.85)!important;
  border-color:rgba(0,0,0,.10)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18),
             inset 0 1px 0 rgba(255,255,255,.70)!important;
  color:#1a2030;
}
[data-theme="light"] .bootstrap-datetimepicker-widget table th{color:#5a6478}
[data-theme="light"] .bootstrap-datetimepicker-widget table th.prev,
[data-theme="light"] .bootstrap-datetimepicker-widget table th.next{color:#3b475a}
[data-theme="light"] .bootstrap-datetimepicker-widget table th.picker-switch{color:#b8862a}
[data-theme="light"] .bootstrap-datetimepicker-widget table th.prev:hover,
[data-theme="light"] .bootstrap-datetimepicker-widget table th.next:hover,
[data-theme="light"] .bootstrap-datetimepicker-widget table th.picker-switch:hover{
  background:rgba(184,134,42,.20)!important;color:#966a1f!important;
}
[data-theme="light"] .bootstrap-datetimepicker-widget table td.day{color:#1a2030}
[data-theme="light"] .bootstrap-datetimepicker-widget table td.day.old,
[data-theme="light"] .bootstrap-datetimepicker-widget table td.day.new{color:#9aa3b6}
[data-theme="light"] .bootstrap-datetimepicker-widget table td.day:hover,
[data-theme="light"] .bootstrap-datetimepicker-widget table td.hour:hover,
[data-theme="light"] .bootstrap-datetimepicker-widget table td.minute:hover,
[data-theme="light"] .bootstrap-datetimepicker-widget table td.second:hover,
[data-theme="light"] .bootstrap-datetimepicker-widget table td span:hover{
  background:rgba(184,134,42,.18)!important;color:#966a1f!important;
}
[data-theme="light"] .bootstrap-datetimepicker-widget table td.today{color:#b8862a!important}
[data-theme="light"] .bootstrap-datetimepicker-widget table td.today::after{background:#b8862a}
[data-theme="light"] .bootstrap-datetimepicker-widget table td.active,
[data-theme="light"] .bootstrap-datetimepicker-widget table td span.active,
[data-theme="light"] .bootstrap-datetimepicker-widget table td.active:hover,
[data-theme="light"] .bootstrap-datetimepicker-widget table td span.active:hover{
  background:linear-gradient(180deg,#cda12c,#b8862a)!important;color:#fff!important;
  box-shadow:0 4px 12px rgba(184,134,42,.35),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
[data-theme="light"] .bootstrap-datetimepicker-widget table td.disabled,
[data-theme="light"] .bootstrap-datetimepicker-widget table td.disabled:hover,
[data-theme="light"] .bootstrap-datetimepicker-widget table th.disabled,
[data-theme="light"] .bootstrap-datetimepicker-widget table th.disabled:hover{
  color:#9aa3b6!important;background:transparent!important;
}
[data-theme="light"] .bootstrap-datetimepicker-widget .datepicker-months td span,
[data-theme="light"] .bootstrap-datetimepicker-widget .datepicker-years td span,
[data-theme="light"] .bootstrap-datetimepicker-widget .datepicker-decades td span{color:#1a2436}
[data-theme="light"] .bootstrap-datetimepicker-widget .datepicker-months td span.old,
[data-theme="light"] .bootstrap-datetimepicker-widget .datepicker-years td span.old,
[data-theme="light"] .bootstrap-datetimepicker-widget .datepicker-decades td span.old{color:#9aa3b6}
[data-theme="light"] .bootstrap-datetimepicker-widget .timepicker-picker td a{color:#1a2436}
[data-theme="light"] .bootstrap-datetimepicker-widget .timepicker-picker td a:hover{
  background:rgba(184,134,42,.18)!important;color:#966a1f!important;
}
[data-theme="light"] .bootstrap-datetimepicker-widget .separator{color:#5b6878}
[data-theme="light"] .bootstrap-datetimepicker-widget a[data-action]{color:#b8862a}
[data-theme="light"] .bootstrap-datetimepicker-widget .btn[data-action="togglePicker"]{
  color:#b8862a;border-color:rgba(0,0,0,.16);
}
.arch-form-shell label{
  font-size:11px;font-weight:600;color:var(--text-secondary);
  letter-spacing:.02em;margin-bottom:4px;
  display:block;
}
.arch-form-shell .form-text,
.arch-form-shell .form-text.text-muted,
.arch-form-shell small.text-muted{
  color:var(--text-muted)!important;
  font-size:11.5px;
  margin-top:4px;
}
.arch-form-shell .form-check{padding-left:1.6em}
.arch-form-shell .form-check-input{
  width:1em;height:1em;margin-top:.25em;margin-left:-1.6em;
  background-color:var(--bg-surface);
  border:1px solid var(--border-hover);
}
.arch-form-shell .form-check-input:checked{
  background-color:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23161e2c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,5'/%3E%3C/svg%3E");
  background-size:80% 80%;background-position:center;background-repeat:no-repeat;
}
[data-theme="light"] .arch-form-shell .form-check-input:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,5'/%3E%3C/svg%3E");
}
.arch-form-shell .form-check-label{
  font-size:13px;color:var(--text-primary);font-weight:500;letter-spacing:.01em;
}

/* Tag-chip host inside the edit shell matches the new input look.
 *
 * Important: NO backdrop-filter on the host. It would establish a
 * stacking context, trapping the absolutely-positioned suggestion
 * dropdown inside the host's z-axis layer — so when materials' menu
 * extended past the host bottom edge it would render *underneath*
 * the next form field's host (which has its own stacking context).
 * Keep the host as a plain box; backdrop-filter is on the entry
 * input below where it doesn't affect dropdown stacking. */
.arch-form-shell .tag-chip-host{
  position:relative;
  z-index:1;                       /* lift above plain inputs in normal flow */
  min-height:36px;
  background:rgba(26,36,54,.28);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-md);
  padding:3px 6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.arch-form-shell .tag-chip-host:focus-within{
  z-index:40;                      /* raise above sibling hosts while typing */
  border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 3px rgba(205,161,44,.14);
}
/* Entry input inside the host shouldn't carry the form-shell input
 * chrome (the host already provides background + border). Stripping
 * it here also avoids backdrop-filter on the entry, which would put
 * a second stacking context inside the host. */
.arch-form-shell .tag-chip-host .tag-chip-entry{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:4px 6px;
  min-height:auto;
}
[data-theme="light"] .arch-form-shell .tag-chip-host{
  background:rgba(255,255,255,.45);
  border-color:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

/* (intl-tel-input theme moved to the consolidated block higher up
 * in this file — see the "intl-tel-input theme — full redesign"
 * section for the current rules.) */

.about-row{
  display:grid;
  grid-template-columns:140px 1fr auto;
  align-items:center;gap:18px;
  padding:12px 8px;
  border-radius:var(--radius-sm);
  transition:background .15s var(--ease);
}
.about-row + .about-row{border-top:1px solid var(--border)}
.about-row:hover{background:var(--overlay-soft)}
.about-row-label{
  font-size:12.5px;font-weight:600;color:var(--text-muted);
  display:inline-flex;align-items:center;gap:9px;
  letter-spacing:.01em;
}
.about-row-label i{color:var(--text-muted);font-size:13px;width:16px;text-align:center;flex-shrink:0}
.about-row-label span{white-space:nowrap}
.about-row-value{
  font-size:14px;color:var(--text-primary);line-height:1.55;
  word-break:break-word;
}
.about-row-value .muted{color:var(--text-muted);font-style:italic;font-size:13px}
.about-row-toggle{justify-self:end;display:flex;align-items:center}
.about-row-toggle form{margin:0}

/* Visibility chip — current state is the label. Click flips it. */
.visi-pill{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 12px;
  border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;border:1px solid;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
  white-space:nowrap;line-height:1;
  font-family:inherit;
}
.visi-pill i{font-size:11px}
.visi-pill.is-public{
  background:var(--accent-dim);color:var(--accent);
  border-color:rgba(205,161,44,.45);
}
.visi-pill.is-public:hover{
  background:var(--bg-surface);color:var(--text-secondary);
  border-color:var(--border-hover);transform:translateY(-1px);
}
.visi-pill.is-private{
  background:var(--bg-surface);color:var(--text-secondary);
  border-color:var(--border-hover);
}
.visi-pill.is-private:hover{
  background:var(--accent-dim);color:var(--accent);
  border-color:rgba(205,161,44,.45);transform:translateY(-1px);
}
.visi-pill.locked{
  cursor:default;background:transparent;
  color:var(--text-muted);border-color:var(--border);
}
.visi-pill.locked:hover{transform:none}

/* Affiliation chips (offices, groups) */
.about-chip-list{display:flex;flex-wrap:wrap;gap:8px}
.about-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px 5px 5px;
  background:var(--bg-surface);
  border:1px solid var(--border-hover);
  border-radius:var(--radius-pill);
  color:var(--text-primary)!important;text-decoration:none;
  font-size:12.5px;font-weight:500;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.about-chip:hover{
  background:var(--accent-dim);
  border-color:rgba(205,161,44,.55);
  color:var(--accent)!important;
  transform:translateY(-1px);
}
.about-chip img{
  width:26px;height:26px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  background:var(--bg-card);
  border:1px solid var(--border);
}
.about-chip-crown{color:var(--accent);font-size:10px;margin-left:2px}

/* Shared links — generic chain icon + site name (or URL fallback). */
.shared-link-list{display:flex;flex-direction:column;gap:8px}
.shared-link-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  background:var(--bg-surface);
  border:1px solid var(--border-hover);
  border-radius:var(--radius-md);
  text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s;
}
.shared-link-row:hover{
  background:var(--accent-dim);
  border-color:rgba(205,161,44,.55);
  transform:translateX(2px);
}
.shared-link-icon{
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--accent);font-size:13px;
  flex-shrink:0;overflow:hidden;
  transition:background .15s,border-color .15s,transform .15s;
}
.shared-link-row:hover .shared-link-icon{
  border-color:var(--accent);
  transform:scale(1.04);
}
.shared-link-icon img{width:20px;height:20px;display:block;object-fit:contain}
/* Higher specificity so Font Awesome's own display rule loses. The
 * onerror handler still wins via inline style when the favicon fails. */
.shared-link-icon > .shared-link-fallback{display:none}
.shared-link-text{
  flex:1;font-size:13px;font-weight:500;color:var(--text-primary);
  letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  text-transform:capitalize;
}
.shared-link-row:hover .shared-link-text{color:var(--accent)}

.about-empty{
  font-size:13px;color:var(--text-muted);
  margin:0;padding:8px 4px;font-style:italic;
}

.about-help{
  margin:14px 0 0;padding:12px 16px;
  background:var(--accent-dim);
  border:1px solid rgba(205,161,44,.30);
  border-radius:var(--radius-md);
  font-size:12.5px;color:var(--text-secondary);line-height:1.55;
  display:flex;align-items:flex-start;gap:10px;
}
.about-help i{color:var(--accent);flex-shrink:0;margin-top:2px}

@media (max-width:640px){
  .user-about-card{padding:18px}
  .about-row{grid-template-columns:1fr;gap:6px;padding:14px 6px}
  .about-row-label{font-size:11.5px}
  .about-row-toggle{justify-self:start}
}
.matched-user-card img{width:90px;height:90px;max-width:90px;max-height:90px;border-radius:var(--radius-md);object-fit:cover;margin-top:5px}
.matched-user-card p{margin:5px 0 0 0;font-size:13px}

/* Post category pill on the card — one neutral gold chrome, icon
 * carries the kind. Audit "categories ≠ colour" rule: a topic isn't
 * a status, doesn't earn its own hue. Legacy .post-card-*-label
 * classes still exist for backwards compat with the post-view hero
 * (those keep their per-category tints — different surface, different
 * rule). */
.post-card-category{
  position:absolute;top:10px;inset-inline-end:10px;
  padding:4px 10px;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:99px;border:1px solid rgba(205,161,44,.30);
  background:rgba(205,161,44,.18);color:var(--accent);
  text-decoration:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:5px;line-height:1;
  z-index:2;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.post-card-category i{font-size:10px}
.post-card-category:hover{
  background:var(--accent);color:#1a1a1a;border-color:var(--accent);
  text-decoration:none;
}

/* Legacy per-category card labels — kept for callers that haven't
 * migrated to .post-card-category yet. New code should use the
 * neutral class above. The token references below still drive the
 * .post-view-*-label hero badges on the post detail page. */
.post-card-architecture-label,
.post-card-books-label,
.post-card-software-label,
.post-card-learn-label,
.post-card-thesis-label{
  position:absolute;top:10px;inset-inline-end:10px;
  padding:4px 10px;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:99px;border:1px solid rgba(255,255,255,.10);
  background-color:var(--cat-bg-strong);color:var(--cat-fg);
  text-decoration:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;line-height:1;
  z-index:2;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)
}
.post-card-architecture-label:hover,
.post-card-books-label:hover,
.post-card-software-label:hover,
.post-card-learn-label:hover,
.post-card-thesis-label:hover{
  color:#1a1a1a;
}

/* post card */
/* Post card — gold-halo gradient, full-bleed cover, line-clamped body,
 * clean footer strip. Category badge sits inside the cover (top-end) and
 * picks up its colour from the per-category --cat-* tokens. */
.post-card{
  position:relative;
  background:linear-gradient(0deg,rgba(255,199,60,.06) 0%,var(--bg-card) 65%);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  /* 480 lines up the cover (4:3) + body + footer + verb pill + tags row
   * so every card has the exact same below-cover height regardless of
   * how much text or how many tags it carries. */
  height:480px;
  width:100%;
  display:flex;flex-direction:column;
  transition:background .2s,transform .3s,box-shadow .2s,border-color .2s;
  box-shadow:var(--shadow-sm);
}
.post-card:hover,.post-card:focus-within{
  background:linear-gradient(0deg,rgba(255,199,60,.12) 0%,var(--bg-surface) 65%);
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.32),0 0 0 1px rgba(205,161,44,.20);
  border-color:rgba(205,161,44,.30);
}
/* Stretched link covers the whole card so a click anywhere except the
 * sub-links (category pill, tag pills) navigates to view_post. The
 * sub-links break above with z-index. */
.post-card .post-card-link{
  position:absolute;inset:0;z-index:1;
  text-decoration:none;color:inherit;
}
.post-card .post-card-link:focus-visible{
  outline:2px solid var(--accent);outline-offset:-3px;
  border-radius:14px;
}

/* Cover image */
.post-head{
  /* 4:3 — taller "magazine cover" ratio. Pairs with the reading-time chip
   * and the "Read post" verb pill so the card scans as something to read,
   * not a glance. Project cards use a wider cinematic ratio for contrast.
   *
   * max-height caps how tall the cover gets when the card is rendered in
   * a wide column (e.g. col-md-6 on the topic detail page). Without it,
   * 4:3 of a wide card would eat all the vertical room and squeeze the
   * body, making the verb pill land at different Y positions per card.
   * 220px keeps the body slot consistent across every column width. */
  position:relative;aspect-ratio:4/3;width:100%;
  max-height:220px;
  background:var(--bg-surface);
  overflow:hidden;
  flex-shrink:0;
}
.post-head img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.post-card:hover .post-head img{transform:scale(1.04)}
.post-head-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:32px;background:var(--bg-surface);
}
/* Soft bottom fade so the title sits cleanly even on bright covers */
.post-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to top,rgba(0,0,0,.32),transparent);
  pointer-events:none;
}

/* Body */
.post-body{
  flex:1;
  display:flex;flex-direction:column;
  padding:14px 18px 10px;
  text-align:start;
}
.post-card-author{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;min-width:0;
}
.post-card-author-avatar{
  width:24px;height:24px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  border:1px solid var(--border-hover);
}
.post-card-author-name{
  font-size:12px;font-weight:500;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.post-card:hover .post-card-author-name{color:var(--accent)}
.post-card-title{
  font-size:16px;font-weight:600;line-height:1.4;color:var(--text-primary);
  margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.post-card-excerpt{
  font-size:13px;line-height:1.6;color:var(--text-muted);
  margin:0;
  /* 2 lines max — the cover is 4:3 (taller) so we lean the body smaller
   * to keep every card the same height. The verb pill below carries the
   * "more →" affordance, so a long excerpt isn't load-bearing here. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}

/* Footer — clean stat row, transparent so the gradient bleeds through */
.post-footer{
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;
  border-top:1px solid var(--border);
  background:transparent;
  font-size:11.5px;color:var(--text-muted);
}
.post-card-stat{
  display:inline-flex;align-items:center;gap:5px;line-height:1;
}
.post-card-stat i{font-size:11px}
.post-card-time{margin-inline-start:auto;font-size:10.5px;color:var(--text-muted);white-space:nowrap}

/* "Read post · X min →" verb pill — anchors the post-side vocabulary
 * AND carries the reading-time figure inside it. Lives below the footer
 * so it reads as a CTA, not as a stat. Brightens on card hover; the
 * arrow slides right by 4px. The "· X min" tail is a softer cyan so the
 * verb stays the dominant element in the pill. */
.post-card-verb{
  display:inline-flex;align-items:center;gap:7px;
  margin:8px 16px 6px;padding:5px 12px;
  border-radius:99px;
  background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.22);
  color:#7dd3fc;
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  align-self:flex-start;flex-shrink:0;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.post-card-verb i{font-size:10px;color:#38bdf8;transition:color .2s var(--ease)}
.post-card-verb-time{font-weight:500;letter-spacing:.02em;opacity:.75;text-transform:none}
.post-card-verb-arrow{transition:transform .2s var(--ease)}
.post-card:hover .post-card-verb{
  background:rgba(56,189,248,.16);
  border-color:rgba(56,189,248,.45);
  color:#bae6fd;
}
.post-card:hover .post-card-verb i{color:#7dd3fc}
.post-card:hover .post-card-verb-time{opacity:.95}
.post-card:hover .post-card-verb-arrow{transform:translateX(4px)}

/* Tags — separate row below the verb pill. Always rendered (even when a
 * post has zero tags) with a fixed height so every card in the feed has
 * identical below-cover geometry — the footer line, verb pill and tag row
 * land at the exact same Y on every card. */
.post-card-tags{
  position:relative;flex-shrink:0;
  display:flex;flex-wrap:nowrap;gap:4px;align-items:center;
  padding:0 16px 12px;
  height:32px;overflow:hidden;
}
.post-tag{flex:0 0 auto;white-space:nowrap;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--overlay-soft);color:var(--text-muted);text-decoration:none;transition:background .15s,color .15s}
.post-tag:hover{background:var(--accent-dim);color:var(--accent)}
.blacklist-btn{background:none;border:none;font-size:10px;color:var(--text-muted);cursor:pointer;padding:2px 5px;border-radius:4px;transition:color .15s}
.blacklist-btn:hover{color:var(--danger)}
.blacklist-btn.blacklisted{color:var(--danger)}

/* post view labels — collapsed via per-category tokens */
.post-view-architecture-label,
.post-view-books-label,
.post-view-software-label,
.post-view-learn-label,
.post-view-thesis-label{position:relative;float:right;right:-20px;top:-20px;padding:8px 14px;font-weight:700;font-size:12px;width:auto;border-radius:var(--radius-sm);border:none;cursor:pointer;text-align:center;background:var(--cat-bg);color:var(--cat-fg);transition:background var(--dur-fast) var(--ease)}
.post-view-architecture-label:hover,
.post-view-books-label:hover,
.post-view-software-label:hover,
.post-view-learn-label:hover,
.post-view-thesis-label:hover{background:var(--cat-bg-strong)}

/* per-category token assignment shared by both card and view labels */
.post-card-architecture-label,.post-view-architecture-label{--cat-fg:var(--cat-architecture-fg);--cat-bg:var(--cat-architecture-bg);--cat-bg-strong:var(--cat-architecture-bg-strong)}
.post-card-books-label,.post-view-books-label{--cat-fg:var(--cat-books-fg);--cat-bg:var(--cat-books-bg);--cat-bg-strong:var(--cat-books-bg-strong)}
.post-card-software-label,.post-view-software-label{--cat-fg:var(--cat-software-fg);--cat-bg:var(--cat-software-bg);--cat-bg-strong:var(--cat-software-bg-strong)}
.post-card-learn-label,.post-view-learn-label{--cat-fg:var(--cat-learn-fg);--cat-bg:var(--cat-learn-bg);--cat-bg-strong:var(--cat-learn-bg-strong)}
.post-card-thesis-label,.post-view-thesis-label{--cat-fg:var(--cat-thesis-fg);--cat-bg:var(--cat-thesis-bg);--cat-bg-strong:var(--cat-thesis-bg-strong)}

/* ── Ad slots ── gated by SiteSettings.enable_ads + per-surface flag + ADVERTISING
   consent (see config/templatetags/ads.py). Empty (collapsed) until a network is
   wired in; the dashed placeholder shows in DEBUG only. Logical props = RTL-safe. */
.ad-slot{display:block;width:100%;margin:18px 0}
.ad-slot--leaderboard{max-width:970px;margin-inline:auto}
.ad-slot--sidebar{max-width:320px}
.ad-slot__ph{display:flex;align-items:center;justify-content:center;min-height:90px;border:2px dashed var(--accent);border-radius:12px;background:rgba(217,164,65,.08);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:14px}
.ad-slot--sidebar .ad-slot__ph{min-height:250px}
/* in-feed ad fills one grid cell at the SAME fixed height as .post-card (480px,
   defined above) so the row stays even; margin:0 aligns it with the cards. */
.ad-slot--feed{margin:0;height:480px}
.ad-slot--feed .ad-slot__ph{height:100%;min-height:0}

/* post view body */
.post-view-body{background:var(--bg-card);border:1px solid var(--border);padding:28px;border-radius:14px;margin-top:5px;width:100%;box-shadow:var(--shadow-sm)}
.post-view-body h3{text-align:start;color:var(--text-primary);font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.post-view-body p{text-align:start;line-height:1.75;color:var(--text-secondary);font-size:15px;max-height:none;overflow:visible}
.post-view-body img{max-width:80%;max-height:800px;border-radius:var(--radius-md);display:block;margin:auto}
.post-attachments{max-height:210px;text-align:center;overflow-y:auto;overflow-x:hidden;margin-top:16px;justify-content:center}
.post-attachments::-webkit-scrollbar{width:3px}
.post-attachments::-webkit-scrollbar-thumb{background:var(--overlay-medium);border-radius:4px}
.post-attachments img{margin:8px;border-radius:var(--radius-sm);display:inline;width:130px;height:auto}
.files-name a{text-align:left;display:block;font-size:14px;color:var(--text-secondary);font-weight:500;width:80%;padding:14px;background-color:var(--bg-card);border-radius:var(--radius-md);margin:8px auto}
.files-name a:hover{background-color:var(--bg-surface);color:var(--text-primary)}

/* add/edit post */
.post-creation-form,.edit-post-form{background:var(--bg-card);border:1px solid var(--border);padding:24px;border-radius:14px;margin-bottom:15px;margin-top:40px;box-shadow:var(--shadow-sm)}
.post-creation-form h2,.edit-post-form h2{color:var(--accent);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);font-size:18px;letter-spacing:.01em}
.post-creation-form input,.post-creation-form select,.post-creation-form textarea,.edit-post-form input,.edit-post-form select,.edit-post-form textarea{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}
.post-creation-form textarea,.edit-post-form textarea{resize:none}
.post-creation-form input:focus,.post-creation-form textarea:focus,.edit-post-form input:focus,.edit-post-form textarea:focus{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid rgba(255,199,60,.40)!important;box-shadow:none!important;outline:none!important}
.files-name-edit{margin:16px}
.u-file-name{width:50%!important;display:inline-block;font-size:20px;border:1px solid var(--border-hover);margin:5px;border-radius:var(--radius-sm)}
.u-delete-file{display:inline;font-size:20px;margin:5px}
.u-delete-file a{color:var(--danger)!important}

/* comment form */
.add-comment-form{margin:24px auto;background:var(--bg-card);border:1px solid var(--border);padding:18px;border-radius:14px;box-shadow:var(--shadow-sm)}
.add-comment-form textarea{resize:none;height:120px;background-color:var(--bg-surface)!important;border:1px solid var(--border-hover);border-radius:var(--radius-sm);color:var(--text-primary)}
.add-comment-form input{background-color:var(--bg-surface)!important;border:1px solid var(--border-hover);border-radius:var(--radius-sm);color:var(--text-primary)}
.add-comment-form input:focus,.add-comment-form textarea:focus{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid rgba(255,199,60,.40)!important;box-shadow:none!important;outline:none!important}
.comment-body{background-color:var(--bg-card);padding:16px;border-radius:var(--radius-lg);margin-bottom:14px;min-height:180px;position:relative}
.comment-body p{text-align:justify;font-size:15px;margin:12px;color:var(--text-secondary)}
.comment-body img{width:30%;height:auto}

/* ── Shared form skin (collapsed base — per-form rules below extend this) ─ */
:is(.user-signing-form,.post-creation-form,.edit-post-form,.add-comment-form,
    .report-post-form,.report-user-form,.report-group-form,.report-project-form,
    .add-project-form,.edit-project-form,.group-creation-form,.add-office-form,.job-form,
    .resume-user-personal-information-form,.resume-user-education-form,
    .resume-user-memberships-form,.resume-user-skills-form,
    .resume-user-career-form,.resume-user-hobbies-form)
  :is(input[type=text],input[type=password],input[type=tel],input[type=email],
      input[type=url],input[type=file],input[type=number],input[type=date],
      textarea,select){background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}
:is(.user-signing-form,.post-creation-form,.edit-post-form,.add-comment-form,
    .report-post-form,.report-user-form,.report-group-form,.report-project-form,
    .add-project-form,.edit-project-form,.group-creation-form,.add-office-form,.job-form,
    .resume-user-personal-information-form,.resume-user-education-form,
    .resume-user-memberships-form,.resume-user-skills-form,
    .resume-user-career-form,.resume-user-hobbies-form)
  :is(input,textarea)::placeholder{color:var(--text-muted)!important}
:is(.user-signing-form,.post-creation-form,.edit-post-form,.add-comment-form,
    .report-post-form,.report-user-form,.report-group-form,.report-project-form,
    .add-project-form,.edit-project-form,.group-creation-form,.add-office-form,.job-form,
    .resume-user-personal-information-form,.resume-user-education-form,
    .resume-user-memberships-form,.resume-user-skills-form,
    .resume-user-career-form,.resume-user-hobbies-form) textarea{resize:none}
:is(.user-signing-form,.post-creation-form,.edit-post-form,.add-comment-form,
    .report-post-form,.report-user-form,.report-group-form,.report-project-form,
    .add-project-form,.edit-project-form,.group-creation-form,.add-office-form,.job-form,
    .resume-user-personal-information-form,.resume-user-education-form,
    .resume-user-memberships-form,.resume-user-skills-form,
    .resume-user-career-form,.resume-user-hobbies-form)
  :is(input,textarea,select):focus{background-color:var(--bg-surface)!important;color:var(--text-primary);border-color:rgba(255,199,60,.40)!important;box-shadow:none!important;outline:var(--focus-ring);outline-offset:1px}

/* report forms */
.report-post-form,.report-user-form,.report-group-form,.report-project-form{background:var(--bg-card);border:1px solid var(--border);padding:18px;border-radius:14px;margin-bottom:15px;text-align:center;box-shadow:var(--shadow-sm)}
.report-post-form label,.report-user-form label,.report-group-form label,.report-project-form label{text-align:left!important;float:left}
.report-post-form button,.report-user-form button,.report-group-form button,.report-project-form button{text-align:center!important;width:80%;margin:5px}
.report-post-form textarea,.report-user-form textarea,.report-group-form textarea,.report-project-form textarea,.report-post-form select,.report-user-form select,.report-group-form select,.report-project-form select{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}
.report-post-form textarea,.report-project-form textarea{resize:none}
.report-post-form textarea:focus,.report-user-form textarea:focus,.report-group-form textarea:focus,.report-project-form textarea:focus{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid rgba(255,199,60,.40)!important;box-shadow:none!important;outline:none!important}

/* search */
/* ── Site footer — multi-column ──────────────────────────────────── */
.footer{
  width:100%;margin-top:60px;
  background:var(--bg-deep);
  border-top:2px solid rgba(205,161,44,.35);
  box-shadow:0 -4px 24px rgba(205,161,44,.07);
}
.ft-inner{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1fr;
  gap:48px;
  max-width:1200px;
  margin:0 auto;
  padding:52px 36px 40px;
}
.ft-brand{display:flex;flex-direction:column;gap:0}
.ft-logo-link{display:inline-block;margin-bottom:14px}
.ft-logo{height:26px;opacity:.85;display:block;transition:opacity .15s}
.ft-logo-link:hover .ft-logo{opacity:1}
[data-theme="light"] .ft-logo{
  filter:brightness(0) saturate(100%) invert(11%) sepia(20%) saturate(1500%) hue-rotate(189deg) brightness(96%) contrast(92%);
  opacity:.7;
}
[data-theme="light"] .ft-logo-link:hover .ft-logo{opacity:.95}
/* UI-05 — footer wordmark mirrors the navbar's .navbar-brand-arch lockup
 * (accent ARCH + muted ITECTENA, 2px tracking, 700) so one brand treatment
 * shows top and bottom. Sized up for footer prominence; theme-aware tokens. */
.ft-wordmark{display:inline-block;font-weight:700;font-size:22px;letter-spacing:2px;color:var(--accent);line-height:1}
.ft-wordmark span{color:var(--text-muted);transition:color .15s var(--ease)}
.ft-logo-link:hover .ft-wordmark span{color:var(--accent)}
.ft-tagline{font-size:13px;color:var(--text-muted);line-height:1.65;max-width:220px;margin:0}
.ft-col-head{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;
}
.ft-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ft-links a{font-size:13.5px;color:var(--text-muted);text-decoration:none;transition:color .15s}
.ft-links a:hover{color:var(--accent)}
.ft-bottom{
  border-top:1px solid var(--border);
  max-width:1200px;margin:0 auto;
  padding:18px 36px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--text-muted);
}
.ft-copy{color:var(--text-muted)}
.ft-credit{color:rgba(205,161,44,.75);font-size:11px}
@media(max-width:900px){
  .ft-inner{grid-template-columns:1fr 1fr;gap:32px 24px;padding:40px 24px 32px}
  .ft-brand{grid-column:1/-1}
  .ft-bottom{padding:16px 24px}
}
@media(max-width:560px){
  .ft-inner{grid-template-columns:1fr;padding:36px 20px 28px}
  .ft-bottom{padding:14px 20px;flex-direction:column;gap:4px;text-align:center}
}
[data-theme="light"] .footer{
  background:var(--bg-surface);
  border-top-color:rgba(184,134,42,.20);
  box-shadow:0 -2px 10px rgba(0,0,0,.06);
}
[data-theme="light"] .ft-credit{color:rgba(150,106,31,.80)}

/* ── Design primitives ─────────────────────────────────────────────── */

/* surf — card-like surface used across profile, sidebars, modals */
.surf{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px
}

/* surf-gold — modifier that swaps the flat .surf background for the post-card
 * gold-halo gradient + soft elevation. Used on the profile sidebar (user-info
 * card, followers, following) so they read as one family with feed cards. */
.surf.surf-gold{
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:background .2s,box-shadow .2s,border-color .2s;
}
.surf.surf-gold:hover{
  background:var(--bg-card);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  border-color:rgba(205,161,44,.22);
}

/* sec-label — small uppercase section heading */
.sec-label{
  font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px
}

/* ── Shared insights pages (posts · groups · projects) ──────────────
 * ins-hero / ins-tiles / ins-tile used in posts/insights.html,
 * groups/group_insights.html, and projects/view_project_insights.html.
 * No extra CSS file is loaded on those pages — lives here. */
.ins-hero{margin-bottom:6px}
.ins-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.84rem;font-weight:600;color:var(--text-muted);
  text-decoration:none;margin-bottom:12px;transition:color .15s;
}
.ins-back:hover{color:var(--accent)}
.ins-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;
}
.ins-eyebrow i{font-size:.75rem}
.ins-hero h1{font-size:1.55rem;font-weight:800;color:var(--text-primary);margin:0 0 10px;line-height:1.2}
.ins-meta{
  display:flex;flex-wrap:wrap;gap:16px;
  font-size:.83rem;color:var(--text-muted);margin:0;
}
.ins-meta span{display:inline-flex;align-items:center;gap:5px}
.ins-meta i{color:var(--accent);font-size:.78rem}
.ins-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:14px;
}
.ins-tile{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .2s,box-shadow .2s,transform .15s;
}
.ins-tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(205,161,44,.04) 0%,transparent 60%);
  pointer-events:none;z-index:0;
}
.ins-tile>*{position:relative;z-index:1}
.ins-tile:hover{
  border-color:rgba(205,161,44,.28);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transform:translateY(-2px);
}
.ins-tile.is-total{
  border-color:rgba(205,161,44,.22);
  background:linear-gradient(135deg,rgba(205,161,44,.07) 0%,var(--bg-card) 70%);
}
.ins-tile-num{
  font-size:2rem;font-weight:900;color:var(--text-primary);
  line-height:1;letter-spacing:.01em;
}
.ins-tile-lbl{
  font-size:.72rem;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;line-height:1.3;
}
[data-theme="light"] .ins-tile{
  background:var(--bg-card);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
[data-theme="light"] .ins-tile.is-total{
  background:linear-gradient(135deg,rgba(184,134,42,.06) 0%,var(--bg-card) 70%);
}
[data-theme="light"] .ins-tile:hover{box-shadow:0 6px 20px rgba(0,0,0,.10)}
@media(max-width:560px){
  .ins-tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .ins-tile-num{font-size:1.7rem}
}

/* Home feed sub-section header — sec-label on the left, "See all" link
 * pinned to the right. Used by Your-recent-posts, Following, and
 * Posts-you-may-like. Replaces a standalone centered label. */
.feed-section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:6px 0 14px;
}
.feed-see-all{
  font-size:12px;font-weight:600;color:var(--accent-hover);
  letter-spacing:.04em;text-decoration:none;white-space:nowrap;
  padding:4px 10px;border-radius:99px;
  border:1px solid rgba(205,161,44,.30);background:rgba(205,161,44,.06);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.feed-see-all:hover{
  background:rgba(205,161,44,.14);
  border-color:rgba(205,161,44,.55);
  color:var(--accent);
}
.feed-see-all i{font-size:10px;margin-left:4px;opacity:.85}

/* generic muted text */
.muted{color:var(--text-muted)}

/* profile sidebar typography */
.profile-name{font-size:16px;font-weight:700;color:var(--text-primary);margin:4px 0 2px;letter-spacing:.01em;word-break:break-word;overflow-wrap:anywhere;max-width:100%}
.profile-sub{font-size:12px;color:var(--text-muted);margin:0 0 8px}
.follow-relation-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);margin:0 0 6px;font-weight:500}
.follow-relation-pill--mutual{color:var(--accent)}

/* stat-mini cell — small "N posts / N followers / N following" pill */
.stat-mini{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:8px 6px;text-align:center
}
.stat-mini .n{font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.1}
.stat-mini .l{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

/* tab row + active tab state */
.tab-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:6px
}
.tab.on{background:var(--accent-dim)!important;color:var(--accent)!important;box-shadow:inset 0 0 0 1px rgba(255,199,60,.30)}

/* Tab-aware action button — anchored to the right end of .tab-row, swaps
 * label/href as the active tab changes. Smaller variant of the CTA pill so
 * it sits flush with the 32px tab pills. */
.tab-action{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin-inline-start:auto;
  height:32px;padding:0 14px;border-radius:var(--radius-sm);
  background:var(--accent-dim);
  color:var(--accent)!important;
  font-weight:600;font-size:12px;letter-spacing:.02em;
  text-decoration:none;
  border:1px solid rgba(205,161,44,.45);
  box-shadow:0 1px 6px rgba(205,161,44,.18);
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease);
  white-space:nowrap;
}
.tab-action i{font-size:11px;line-height:1}
.tab-action:hover{
  background:var(--accent);
  color:#1a1a1a!important;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(205,161,44,.14),0 4px 12px rgba(205,161,44,.32);
  transform:translateY(-1px);
}
.tab-action:active{transform:translateY(0);box-shadow:0 1px 6px rgba(205,161,44,.22)}
.tab-action[hidden]{display:none}

/* jobs — see static/css/jobs.css (Step 12 extraction). */

/* ── App toolbar — site-wide filter pattern ─────────────────
 * The frosted .posts-filter-bar shell holds the toolbar row: a
 * Filters toggle + keyword search input + an arch-cta create button
 * at the right edge, always visible. Below the row, a Bootstrap
 * collapse hides the full filter grid until the user opens it.
 * Used on /posts/, /projects/, /jobs/, /offices/, /groups/. */
.app-toolbar-form{padding:12px 14px}
.app-toolbar-row{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:10px;
}
@media(max-width:575.98px){
  .app-toolbar-row{flex-wrap:wrap;gap:8px}
  .app-toolbar-search{order:-1;width:100%}
}

/* Filters toggle — pill button with icon, count badge, chevron */
.app-filters-toggle{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 16px;flex-shrink:0;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:13px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.app-filters-toggle:hover{border-color:var(--border-hover);background:var(--bg-card)}
.app-filters-toggle > i:first-child{color:var(--text-secondary);font-size:13px}
.app-filters-chev{font-size:10px;color:var(--text-muted);transition:transform .2s var(--ease)}
.app-filters-toggle[aria-expanded="true"] .app-filters-chev{transform:rotate(180deg)}
.app-filters-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:var(--text-muted);color:var(--bg-deep);
  border-radius:99px;
  font-size:11px;font-weight:700;
}

/* Keyword search input — full-width with leading icon */
.app-toolbar-search{position:relative;flex:1;min-width:0;margin:0}
.app-toolbar-search > i{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:13px;pointer-events:none;
}
.app-toolbar-search > input{
  width:100%;height:40px;
  padding:0 14px 0 38px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:13px;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.app-toolbar-search > input::placeholder{color:var(--text-muted);opacity:.7}
.app-toolbar-search > input:focus{
  outline:none;background:var(--bg-card);
  border-color:rgba(205,161,44,.45);
}

/* Collapse panel margin so it sits clear of the toolbar row */
.app-filters-panel{position:relative;z-index:1;margin-top:14px}

/* Toolbar CTA — sits at the end of the toolbar row; visual treatment
 * + size come from .arch-cta (the site-wide "Edit profile" main_btn).
 * margin-inline-start:auto pushes it to the right edge regardless of
 * how the search input sizes itself. */
.app-toolbar-cta{flex-shrink:0;margin-inline-start:auto}
/* Map-view toggle button — sits between the search and the primary CTA.
 * margin-inline-start:auto on the Map button pushes it to the end first;
 * the CTA's own auto margin then no-ops because the Map button already
 * consumed the slack. Result: [Filters] [Search…] -> [Map] [+ Add]. */
.app-toolbar-map{
  flex-shrink:0;margin-inline-start:auto;
  display:inline-flex;align-items:center;gap:7px;
  height:40px;padding:0 14px;font-size:13px;
}
.app-toolbar-map + .app-toolbar-cta{margin-inline-start:0}
@media (max-width:560px){
  .app-toolbar-map-label{display:none}
  .app-toolbar-map{padding:0 12px}
}

/* Panel action buttons (Apply / Clear) match the toolbar inner row
 * height (40px) so they sit at the same scale as the Filters toggle
 * and the search input above. */
.app-filters-actions .btn{height:40px;padding:0 18px;font-size:13px}

/* Six-cell filter grid — auto-fits down to 2 columns on small screens. */
.app-filters-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px 14px;
  margin-bottom:14px;
}
@media (max-width:1100px){.app-filters-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media (max-width:640px){ .app-filters-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width:400px){ .app-filters-grid{grid-template-columns:1fr}}
.app-filter-cell-salary{grid-column:span 2}
@media (max-width:640px){.app-filter-cell-salary{grid-column:span 2}}

.app-filter-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.app-filter-cell-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);
}
.app-filter-cell-label i{color:var(--text-muted);font-size:11px}

/* Unified input / select chrome — same height, padding, border, focus.
 * Locked to 38px so every cell in the toolbar (num-stepper salary
 * range, filter-dd trigger, native sort select) reads as one row. */
.app-filter-cell input[type="text"],
.app-filter-cell input[type="number"],
.app-filter-cell input[type="search"],
.app-filter-cell select{
  width:100%;height:38px;
  padding:0 10px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:12.5px;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.app-filter-cell input::placeholder{color:var(--text-muted);opacity:.65}
.app-filter-cell input:focus,
.app-filter-cell select:focus{
  outline:none;background:var(--bg-card);
  border-color:rgba(205,161,44,.45);
}

/* Salary range — two inputs + em-dash, both halves equal width. */
.app-filter-range{display:flex;align-items:center;gap:6px}
.app-filter-range > input{flex:1;min-width:0;padding:0 8px}
.app-filter-range-sep{color:var(--text-muted);font-weight:600;font-size:12px;flex-shrink:0}

/* ── File input — site-wide ────────────────────────────────
 * Native `<input type="file">` gets a flat dark surface plus a gold
 * "Choose file" button hugging the left edge, full input height. The
 * pseudo-element pair (::file-selector-button + the legacy WebKit one)
 * covers every modern browser. Crispy/Bootstrap file inputs get the
 * same treatment via a parallel .form-control[type="file"] selector. */
input[type="file"],
input[type="file"].form-control{
  width:100%;
  height:40px;line-height:1;
  padding:0;                        /* button fills the left edge */
  background:var(--bg-surface);
  color:var(--text-secondary);
  font-size:13px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  overflow:hidden;
  display:flex;align-items:center;
}
input[type="file"]:hover,
input[type="file"].form-control:hover{border-color:var(--border-hover)}
input[type="file"]:focus,
input[type="file"].form-control:focus{
  outline:none;
  border-color:rgba(205,161,44,.45);
  background:var(--bg-card);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  height:100%;
  padding:0 18px;
  margin:0 12px 0 0;
  background:var(--accent-dim);
  color:var(--accent);
  font-weight:600;font-size:13px;letter-spacing:.02em;
  border:0;
  border-inline-end:1px solid rgba(205,161,44,.45);
  border-radius:0;
  cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease);
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{
  background:var(--accent);
  color:var(--bg-deep);
}

/* ── Form section grouping ─────────────────────────────────
 * Titles for the field groups inside add_job / add_project. Sits inside
 * the existing .arch-form-shell + .arch-form-section frame; just adds a
 * heading + soft top border between groups so the form reads as
 * Basics → Location → Requirements → ... sections instead of one long
 * scroll. */
.form-group-section + .form-group-section{
  border-top:1px solid var(--border);
  padding-top:18px;
  margin-top:18px;
}
.form-group-title{
  display:flex;align-items:center;gap:8px;
  margin:0 0 12px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);
}
.form-group-title i{color:var(--accent);font-size:13px}
.form-group-hint{
  margin:6px 0 0;font-size:12px;color:var(--text-muted);line-height:1.55;
}
/* Two equal cells side-by-side inside one section — salary from/to,
 * date pairs, etc. Stacks on narrow screens. */
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.form-pair{grid-template-columns:1fr}}
.form-pair-cell > .form-group{margin-bottom:0}

/* view_job, apply form, quick-apply modal — see static/css/jobs.css. */


/* Number-input stepper — hides the browser-default spinner and replaces
 * it with a stacked +/- pair on the right. Up/down chevrons match the
 * site's gold-on-dark vocabulary; the input itself stays borderless and
 * inherits the cell's outer border so the whole control reads as one. */
.num-stepper{
  flex:1;min-width:0;width:100%;
  display:flex;align-items:stretch;
  height:38px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.num-stepper:focus-within{background:var(--bg-card);border-color:rgba(205,161,44,.45)}
.num-stepper > input[type="number"]{
  flex:1;min-width:0;
  height:100%;padding:0 8px;
  background:transparent!important;border:0!important;
  color:var(--text-primary);font-size:12.5px;
  outline:none;
  -moz-appearance:textfield;appearance:textfield;
}
.num-stepper > input[type="number"]::-webkit-outer-spin-button,
.num-stepper > input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num-stepper > input[type="number"]:focus{outline:none}
.num-stepper-btns{
  display:flex;flex-direction:column;
  flex-shrink:0;
  border-inline-start:1px solid var(--border);
}
.num-stepper-btn{
  flex:1;width:22px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;
  color:var(--text-muted);
  font-size:10px;line-height:1;cursor:pointer;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.num-stepper-btn:first-child{border-bottom:1px solid var(--border)}
.num-stepper-btn:hover{background:var(--accent-dim);color:var(--accent)}
.num-stepper-btn:active{background:rgba(205,161,44,.20)}

/* Available toggle — pill chip styled to align with the input row. */
.app-filter-cell-checkbox .app-filter-toggle{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 12px;margin:0;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:12.5px;color:var(--text-secondary);
  cursor:pointer;user-select:none;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.app-filter-cell-checkbox .app-filter-toggle:hover{border-color:var(--border-hover);background:var(--bg-card)}
.app-filter-cell-checkbox .app-filter-toggle input[type="checkbox"]{
  width:14px;height:14px;accent-color:var(--accent);cursor:pointer;margin:0;
}
.app-filter-cell-checkbox .app-filter-toggle:has(input:checked){
  border-color:rgba(205,161,44,.45);
  color:var(--text-primary);
}

/* Footer actions — right-aligned, primary CTA + clear link. */
.app-filters-actions{
  position:relative;z-index:1;
  display:flex;justify-content:flex-end;align-items:center;gap:8px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.app-filters-actions .btn{font-size:12.5px;padding:8px 18px;height:34px}
/* UI-49 — the category dropdown panel (.cat-dd-panel z:60) was trapped inside
 * .app-filters-grid (z:1); the later-DOM-sibling .app-filters-actions row (also
 * z:1, transparent but pointer-events:auto, full width) painted + hit-tested
 * above it and swallowed clicks on the top options. While a filter dropdown is
 * open, lift the grid above the actions row; and stop the actions row's empty
 * transparent width from eating clicks (only its buttons stay interactive). */
.app-filters-grid:has(.cat-dd-panel:not([hidden])),
.app-filters-grid:has(.cat-dd-button[aria-expanded="true"]){z-index:5}
.app-filters-actions{pointer-events:none}
.app-filters-actions > *{pointer-events:auto}

/* profile */
.profile-data{text-align:left;border-right:1px solid var(--border);padding:10px}
.user-card{background-color:var(--bg-card);width:95%;padding:18px;margin:5px 5px 24px 5px;border-radius:20px;text-align:center;transition:background .2s}
.user-card:hover{background-color:var(--bg-surface)}
.user-card-cover-image img{width:90px;height:90px;border-radius:50%;object-fit:cover;display:inline;cursor:pointer}
.user-more-details p{font-size:15px;color:var(--accent)}
.user-more-details p span{font-size:15px;color:var(--text-muted)}
.user-profile-controls .edit-account a,.user-profile-controls .resume a{width:75%;margin:6px}
.user-profile-controls .delete-account button{width:75%;margin:6px}
.react-user .user-follow-unfollow-form button,.react-user .user-resume-view a,.react-user .report-user-button button{width:90%;margin-bottom:8px}
.tab{background-color:transparent;color:var(--text-muted);border:none;outline:none;border-radius:var(--radius-sm);padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.tab:hover{color:var(--text-secondary);background:var(--overlay-soft)}
.user-project-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px;min-height:440px;width:100%;display:flex;flex-direction:column;text-align:center;margin-top:16px;transition:background .2s,transform .3s,box-shadow .2s,border-color .2s;box-shadow:var(--shadow-sm)}
.user-project-card:hover{background:var(--bg-surface);transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.32),0 0 0 1px rgba(205,161,44,.20);border-color:rgba(205,161,44,.30)}
.user-followers img,.user-following img{width:70px;height:70px;margin:0 8px;border-radius:50%;object-fit:cover;border:2px solid var(--bg-surface);display:inline}
.user-groups img{width:70px;height:70px;margin:0 8px;border-radius:var(--radius-sm);object-fit:cover;border:2px solid var(--bg-surface);display:inline}

/* The pre-migration `/* groups */` block (twelve rules: .group-search-form,
 * .group-card{...}, .group-card:hover, .group-card h3, .group-cover img,
 * .group-card p, .group-card p::-webkit-scrollbar*, .group-members img,
 * .group-list-card, .group-list-card:hover) was removed 2026-05-10. Every
 * rule either:
 *   - conflicted with the dedicated namespace in static/css/groups.css
 *     (.group-card, .group-cover, .group-description, .group-members
 *     all live there now), OR
 *   - referenced unused classes (.group-search-form, .group-list-card,
 *     .user-groups img — no template renders them).
 *
 * The big offender was `.group-card p { height:100px; max-height:100px;
 * overflow-y:auto }` — that's why the admin <p> on the profile groups tab
 * was 100px tall with a scrollbar. Killed at the source. */
.group-p-left{padding:16px}

/* Chat header card — glass shell matching the sidebar Members panel
 * so the page reads as one unified surface treatment. Subtle gold
 * accent gradient at the leading edge calls out the group identity. */
.group-p-data{
  position:relative;
  background:rgba(22,30,44,.55);
  border:1px solid rgba(205,161,44,.22);
  border-radius:14px;
  padding:14px 16px;
  height:150px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  /* Each glass surface in this column (header, chat-box, composer)
     creates its own stacking context via backdrop-filter, and they
     paint in DOM order. Bumping the header's z-index above its
     siblings keeps the kebab dropdown's <ul> on top of the chat
     bubble area — z-index:1100 on the dropdown alone can't reach
     across a sibling stacking context. */
  z-index:30;
  /* No overflow:hidden — would clip the kebab dropdown. Ribbon
     below uses its own border-radius so it tucks behind the rounded
     corners without needing parent clipping. */
}
.group-p-chat-box{position:relative;z-index:1}
.group-p-add-message{position:relative;z-index:1}
[data-theme="light"] .group-p-data{
  background:rgba(255,255,255,.65);
  border-color:rgba(184,134,42,.32);
}
.group-p-data-image img{
  width:72px;height:72px;object-fit:cover;
  border-radius:var(--radius-md);
}
/* The unscoped .entity-cover-fallback--lg → 72x72 override that used
 * to live here moved into groups.css (.group-p-data-image .group-cover-fallback--lg)
 * once the cover-fallback primitive was split per app. */
.group-p-data-text{flex:1 1 auto;min-width:0}
.group-p-data-title{
  color:var(--text-primary);font-size:20px;font-weight:700;
  line-height:1.25;margin:0 0 2px;
  overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(135deg,var(--text-primary) 70%,var(--accent,#cda12c));
  -webkit-background-clip:text;background-clip:text;
}
.group-p-data-date{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--accent,#cda12c);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:6px;
}
.group-p-data-date::before{content:"\f017";font-family:"Font Awesome 6 Free";font-weight:400;font-size:10px;opacity:.7}
.group-p-data-description{
  margin:0;max-height:88px;overflow-y:auto;
  text-align:start;color:var(--text-secondary,rgba(255,255,255,.78));font-size:13px;
  line-height:1.5;
}
.group-p-data-description::-webkit-scrollbar{width:2px}
.group-p-data-description::-webkit-scrollbar-thumb{
  background:var(--overlay-medium);border-radius:4px;
}
.group-sidebar{
  padding:16px;
  border-right:1px solid var(--border);
}
/* ── Group header kebab + dropdown (admin actions) ──────────────── */
.group-actions-menu{margin-inline-start:auto;align-self:flex-start}
.group-actions-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:transparent;border:1px solid var(--border);
  color:var(--text-muted);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.group-actions-toggle:hover,
.group-actions-toggle[aria-expanded="true"]{
  background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-hover);
}
.group-actions-dropdown{
  min-width:240px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:6px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  /* Lift above the chat-box's backdrop-blur stacking context so the
     dropdown never paints behind a sibling glass surface. 1100 sits
     above Bootstrap's default dropdown layer (1000) and below modal
     dialog (1055) so trigger-from-modal still works if added later. */
  z-index:1100;
}
.group-actions-menu{position:relative;z-index:1100}
.group-actions-dropdown .dropdown-header{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);padding:6px 14px 4px;font-weight:600;
}
.group-actions-dropdown .dropdown-divider{
  border-top:1px solid var(--border);margin:4px 0;
}
.group-actions-dropdown .dropdown-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;font-size:13px;
  color:var(--text-primary);background:transparent;
  border:0;width:100%;text-align:start;
}
.group-actions-dropdown .dropdown-item:hover,
.group-actions-dropdown .dropdown-item:focus{
  background:var(--bg-surface);color:var(--text-primary);
}
.group-actions-dropdown .dropdown-item i{
  width:14px;color:var(--text-muted);
}
.group-actions-dropdown .dropdown-item-form{margin:0}
.group-actions-dropdown .dropdown-item-form .dropdown-item{
  cursor:pointer;
}
.group-actions-dropdown .dropdown-item-danger{color:var(--danger,#ef4444)}
.group-actions-dropdown .dropdown-item-danger i{color:inherit}
.group-actions-state{
  margin-inline-start:auto;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  padding:2px 8px;border-radius:999px;
  background:var(--bg-surface);color:var(--text-muted);
  border:1px solid var(--border);
}
.group-actions-state.is-on{
  background:var(--accent-dim,rgba(205,161,44,.16));
  color:var(--accent,#cda12c);
  border-color:rgba(205,161,44,.45);
}
.group-p-members-out{max-height:580px;padding:4px;border-radius:var(--radius-sm);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.group-p-members-out::-webkit-scrollbar{display:none}
.group-p-members{background-color:var(--bg-surface);padding:6px;border-radius:var(--radius-sm);margin-bottom:8px;color:var(--text-primary);transition:background .15s}
.group-p-members:hover{background-color:#1f2d42}
.group-p-members span{font-size:13px;margin-left:5px;font-weight:500;width:100%}
.group-p-members a{color:var(--text-primary);text-decoration:none}
.group-p-members img{border-radius:50%;margin-left:10px;width:38px;height:38px;object-fit:cover;border:2px solid var(--bg-surface);display:inline}
.g_members_action_btn{border:none;background:transparent}
.g_member_actions{width:100%;background-color:var(--bg-surface);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}
.g_member_actions li button{width:100%;text-align:left;font-size:13px}
.g_member_actions li button:hover{background-color:var(--bg-card);color:var(--accent)}
.leave-join-group,.report-group{width:100%;text-align:center;margin-bottom:16px}
.leave-join-group a,.report-group a{width:80%;height:35px;font-size:14px}
.blocked-admin-user-modal,.blocked-user-modal{max-height:560px;overflow-x:hidden;overflow-y:auto}
.blocked-admin-user-modal::-webkit-scrollbar,.blocked-user-modal::-webkit-scrollbar{width:2px}
.blocked-admin-user-modal::-webkit-scrollbar-thumb,.blocked-user-modal::-webkit-scrollbar-thumb{background:var(--overlay-medium);border-radius:4px}
.unblock-unadmin-user{display:inline;width:20%;padding:10px;border-radius:var(--radius-sm);float:right;text-align:center}
.group-p-chat-box{
  min-height:480px;max-height:70vh;
  border-radius:14px;margin-bottom:10px;
  background:rgba(22,30,44,.40);
  border:1px solid rgba(205,161,44,.18);
  color:var(--text-primary);
  padding:0;
  overflow:hidden;
  display:flex;flex-direction:column;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.18);
}
[data-theme="light"] .group-p-chat-box{
  background:rgba(255,255,255,.55);
  border-color:rgba(184,134,42,.30);
}
.group-p-chat-box .chat{
  flex:1;min-height:0;
  overflow-x:hidden;overflow-y:auto;
  padding:16px 24px;
}
.group-p-chat-box .chat::-webkit-scrollbar{width:4px}
.group-p-chat-box .chat::-webkit-scrollbar-thumb{background:var(--overlay-medium);border-radius:4px}
/* group chat input — flex layout (Phase 2 rebuild 2026-04-28) */
/* Composer — single glass shell holding the textarea + paperclip +
 * mic + send. Equalised circular action buttons, transparent inner
 * textarea so the shell IS the visual frame; gold accent halo on
 * focus-within ties the cluster together. */
.group-p-add-message{
  background:rgba(22,30,44,.55);
  border:1px solid rgba(205,161,44,.22);
  border-radius:14px;
  padding:8px 10px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.20);
  transition:border-color .18s,box-shadow .18s;
}
.group-p-add-message:focus-within{
  border-color:rgba(205,161,44,.55);
  box-shadow:0 0 0 3px rgba(205,161,44,.10), 0 6px 18px rgba(0,0,0,.20);
}
[data-theme="light"] .group-p-add-message{
  background:rgba(255,255,255,.65);
  border-color:rgba(184,134,42,.32);
}
.group-p-add-message form{display:flex;align-items:flex-end;gap:6px;margin:0}
.group-p-add-message .form-label{display:none}
.message-attachment-input{display:none}
.group-message-input{
  flex:1 1 auto;min-width:0;resize:none;height:60px;
  padding:10px 12px;
  background-color:transparent !important;
  border:0 !important;
  color:var(--text-primary);
  outline:none !important;box-shadow:none !important;
  font-size:14px;
}
.group-message-input:focus{
  color:var(--text-primary);
  background-color:transparent !important;
  border:0 !important;
  outline:none !important;box-shadow:none !important;
}
.group-message-input::placeholder{color:var(--text-muted);opacity:.7}

/* Composer toolbar: attach · poll · mic · send share the same circular shape. */
.label-for-attachment,
.poll-compose-btn,
.composer-mic-btn,
.group-p-add-message button[type=submit]{
  flex:0 0 auto;
  height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
}
.label-for-attachment,
.poll-compose-btn,
.composer-mic-btn{
  width:40px;border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(205,161,44,.18);
  color:var(--text-muted);cursor:pointer;
  font-size:14px;
}
.label-for-attachment:hover,
.poll-compose-btn:hover,
.poll-compose-btn.is-active,
.composer-mic-btn:hover{
  background:var(--accent-dim,rgba(205,161,44,.16));
  color:var(--accent,#cda12c);
  border-color:rgba(205,161,44,.55);
}
.label-for-attachment i,.poll-compose-btn i{font-size:15px}
.composer-mic-btn{margin-inline-start:0}
.composer-mic-btn.is-recording{
  background:rgba(178,62,61,.20);
  color:var(--danger,#ef4444);
  border-color:rgba(178,62,61,.55);
  animation:mic-pulse 1.6s ease-in-out infinite;
}
.group-p-add-message button[type=submit]{
  padding:0 18px;border-radius:999px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(205,161,44,.25);
}
.group-p-add-message button[type=submit]:hover{
  box-shadow:0 6px 16px rgba(205,161,44,.35);
}

/* chat bubbles */
.chat-body .answer.left{padding:0 0 0 52px;text-align:left;float:left}
.chat-body .answer{position:relative;max-width:560px;overflow:hidden;clear:both}
.chat-body .answer.left .avatar{left:0}
.chat-body .answer .avatar{bottom:32px}
.chat .avatar{width:36px;height:36px;position:absolute}
.chat .avatar img{display:block;border-radius:50%;height:32px;width:32px}
.chat-body .answer .name{font-size:13px;line-height:34px}
.chat-body .answer.left .text{background:var(--bg-surface);color:var(--text-secondary);border-radius:4px 12px 12px 12px}
.chat-body .answer .text{padding:10px 14px;font-size:14px;line-height:1.6;position:relative;overflow-wrap:break-word}
.chat-body .answer.left .text:before{left:-28px;border-right-color:var(--bg-surface);border-right-width:10px}
.chat-body .answer .text:before{content:'';display:block;position:absolute;bottom:0;border:16px solid transparent;border-bottom-width:0}
.chat-body .answer.left .time{padding-left:10px;color:var(--text-muted)}
.chat-body .answer .time{font-size:12px;line-height:32px}
.chat-body .answer.right{padding:0 52px 0 0;text-align:right;float:right}
.chat-body .answer.right .avatar{right:0}
.chat-body .answer.right .text{background:var(--accent-dim);color:#1a1200;border-radius:12px 4px 12px 12px}
.chat-body .answer.right .text:before{right:-28px;border-left-color:var(--accent-dim);border-left-width:10px}
.chat-body .answer.right .time{padding-right:10px;color:var(--text-muted)}
/* UI-50 — in dark mode the own (sent) bubble was a 10% gold tint (--accent-dim)
 * carrying near-black text #1a1200: the tint composites over the dark page to
 * ~rgb(38,34,24), collapsing the text contrast to ~1.17 (unreadable). Use a
 * solid gold fill in dark mode so the dark text keeps its contrast — matching
 * the light-mode "gold bubble, dark text" intent. Tail follows. The incoming
 * bubble (1.11 vs page) gets a hairline ring so its shape reads as distinct. */
[data-theme="dark"] .chat-body .answer.right .text{background:var(--accent)}
[data-theme="dark"] .chat-body .answer.right .text:before{border-left-color:var(--accent)}
[data-theme="dark"][dir="rtl"] .chat-body .answer.right .text:before{border-right-color:var(--accent)}
[data-theme="dark"] .chat-body .answer.left .text{box-shadow:0 0 0 1px var(--border-hover)}


/* group creation */
.group-creation-form{background:var(--bg-card);border:1px solid var(--border);padding:24px;border-radius:14px;margin-bottom:15px;box-shadow:var(--shadow-sm)}
.group-creation-form h2{color:var(--accent);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);font-size:18px;letter-spacing:.01em}
.group-creation-form input,.group-creation-form select,.group-creation-form textarea{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}
.group-creation-form textarea{resize:none}
.group-creation-form input:focus,.group-creation-form textarea:focus{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid rgba(255,199,60,.40)!important;box-shadow:none!important;outline:none!important}

/* contact */
.follow-us i{margin:12px;color:var(--text-muted)}
.follow-us i:hover{color:var(--accent)}

/* resume */
.user-resume{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm)}
.resume-user-basic-information h3,.resume-user-basic-information h4,.resume-user-basic-information h5{color:var(--accent)}
.resume-user-personal-information-form,.resume-user-education-form,.resume-user-memberships-form,.resume-user-skills-form,.resume-user-career-form,.resume-user-hobbies-form{background-color:var(--bg-card);padding:16px;border-radius:var(--radius-lg);margin-bottom:14px}
.resume-user-personal-information-form input,.resume-user-personal-information-form select,.resume-user-education-form input,.resume-user-education-form select,.resume-user-education-form textarea,.resume-user-memberships-form input,.resume-user-memberships-form select,.resume-user-skills-form input,.resume-user-career-form input,.resume-user-career-form select,.resume-user-career-form textarea,.resume-user-hobbies-form input{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}
.resume-user-personal-information h4:first-child,.resume-user-education h4,.resume-user-memberships h4,.resume-user-skills h4,.resume-user-career h4,.resume-user-hobbies h4{color:var(--accent)}
.resume-user-personal-information a:first-child,.resume-user-education h4 a:first-child,.resume-user-memberships h4 a:first-child,.resume-user-skills h4 a,.resume-user-career h4 a,.resume-user-hobbies h4 a{text-decoration:none;color:var(--danger);font-size:13px}
.resume-user-personal-information h5 span,.resume-user-education span,.resume-user-memberships span,.resume-user-career h5 span{color:#A1B6E5;font-size:13px}

/* add/edit project */
.add-project-form,.edit-project-form{background:var(--bg-card);border:1px solid var(--border);padding:24px;border-radius:14px;margin-bottom:15px;box-shadow:var(--shadow-sm)}
.add-project-form h2,.edit-project-form h2{color:var(--accent);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);font-size:18px;letter-spacing:.01em}
.add-project-form input,.add-project-form select,.add-project-form textarea,.edit-project-form input,.edit-project-form select,.edit-project-form textarea{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--radius-sm)}
.add-project-form textarea,.edit-project-form textarea{resize:none}
.add-project-form input:focus,.add-project-form textarea:focus,.edit-project-form input:focus,.edit-project-form textarea:focus{background-color:var(--bg-surface)!important;color:var(--text-primary);border:1px solid rgba(255,199,60,.40)!important;box-shadow:none!important;outline:none!important}

/* projects list */
/* Project card — modeled on .post-card so the two grids share visual
 * rhythm. Cover with category pill overlay, publisher row at the top
 * of the body (avatar + name + year), bold title, stats footer. The
 * whole card is clickable via a stretched ::after-style <a> overlay;
 * publisher row + category pill break above it with z-index so they
 * stay independently clickable. */
.project-card{
  position:relative;
  background:linear-gradient(0deg,rgba(255,199,60,.06) 0%,var(--bg-card) 65%);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  /* Matches .post-card height so a future mixed feed (posts + projects)
   * lays out as a uniform grid. Cover ratio differs between the two so
   * each card type still scans as its own visual object. */
  height:480px;
  width:100%;
  display:flex;flex-direction:column;
  transition:background .2s,transform .3s,box-shadow .2s,border-color .2s;
  box-shadow:var(--shadow-sm);
}
.project-card:hover,.project-card:focus-within{
  background:linear-gradient(0deg,rgba(255,199,60,.12) 0%,var(--bg-surface) 65%);
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.32),0 0 0 1px rgba(205,161,44,.20);
  border-color:rgba(205,161,44,.30);
}
/* Stretched link covers the full card so a click anywhere except the
 * sub-links navigates to view_project. Sub-links (publisher row, cat
 * pill) sit above with z-index:2. */
.project-card .project-card-link{
  position:absolute;inset:0;z-index:1;
  text-decoration:none;
}
.project-card .project-card-link:focus-visible{
  outline:2px solid var(--accent);outline-offset:-3px;
  border-radius:14px;
}

/* Cover */
.project-card .project-cover{
  /* 16:9 — wider cinematic ratio. Projects are about looking; the cover
   * gets the camera-frame format that portfolio shots are taken in.
   * Post cards use a taller 4:3 magazine ratio for contrast. */
  position:relative;aspect-ratio:16/9;width:100%;
  background:var(--bg-surface);overflow:hidden;flex-shrink:0;
}
.project-card .project-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.project-card:hover .project-cover img{transform:scale(1.04)}
.project-card .project-cover-placeholder{
  /* Background is set inline via project.cover_gradient_css so each
   * project gets its own deterministic gradient. The single uppercase
   * initial sits in the centre with a soft text shadow for readability. */
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);font-family:'Poppins',system-ui,sans-serif;
  font-size:64px;font-weight:700;letter-spacing:.04em;
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}
.project-card .project-cover-initial{display:block;line-height:1}

/* The shared `.entity-cover-fallback` primitive (and its --xs / --sm /
 * --lg size modifiers) was split per-app in 2026-05-10 to honour the
 * "each element has its own dedicated classes" principle. The base
 * + job-specific overlay now live in jobs.css as `.job-cover-fallback`;
 * the group-context flavour + size modifiers live in groups.css as
 * `.group-cover-fallback` / `.group-cover-fallback--xs` / `.group-cover-fallback--lg`.
 * If a new entity needs a cover fallback, add it to that app's CSS
 * (don't reintroduce a shared base here). */

/* Post-card head fallback — same gradient + initial pattern, inside the
 * card's existing 4:3 cover slot. */
.post-head-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);font-family:'Poppins',system-ui,sans-serif;
  font-weight:700;letter-spacing:.04em;font-size:54px;line-height:1;
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}
.post-head-initial{display:block;line-height:1}

/* Post hero + Job hero fallback states — same gradient treatment as the
 * full cover image. The hero overlay still applies on top. */
.post-hero-cover--empty,
.job-hero-cover--empty{position:relative}
/* Soft bottom fade so the title sits cleanly even on bright covers */
.project-card .project-cover::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to top,rgba(0,0,0,.32),transparent);
  pointer-events:none;
}

/* Category pill — same treatment as .post-card-architecture-label */
.project-card-category{
  position:absolute;top:10px;inset-inline-end:10px;z-index:2;
  padding:4px 10px;font-weight:700;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;
  border-radius:99px;border:1px solid rgba(255,255,255,.10);
  background:rgba(205,161,44,.28);color:var(--accent);
  text-decoration:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.project-card-category:hover{
  background:var(--accent);color:#1a1a1a;
}

/* Draft pill — only rendered on the user's own profile when a project
 * is still a draft. Sits in the top-start corner of the cover, opposite
 * the category pill. Orange scheme matches the hero "Draft" flag on the
 * project view page so the visual language is consistent. */
.project-card .project-card-draft-pill{
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  padding:4px 10px;font-weight:700;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;
  border-radius:99px;
  background:rgba(251,146,60,.85);color:#fff;
  border:1px solid rgba(255,255,255,.10);
  display:inline-flex;align-items:center;gap:5px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.project-card .project-card-draft-pill i{font-size:9px}
.project-card.is-draft{border-color:rgba(251,146,60,.30)}

/* Stage badge — project lifecycle. Sits bottom-start of the cover so it
 * doesn't clash with the category pill (top-end) or draft pill (top-start).
 * Per-stage colour gives instant visual scanning across the grid. */
.project-card-stage{
  position:absolute;bottom:10px;inset-inline-start:10px;z-index:2;
  padding:4px 10px;font-weight:700;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;
  border-radius:99px;border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  text-decoration:none;display:inline-flex;align-items:center;
  transition:opacity .15s;
}
.project-card-stage:hover{opacity:.85;color:inherit}
.project-card-stage--concept    {background:rgba(139,92,246,.28);color:#c4b5fd}
.project-card-stage--sd         {background:rgba(59,130,246,.28);color:#93c5fd}
.project-card-stage--dd         {background:rgba(205,161,44,.28);color:var(--accent)}
.project-card-stage--cd         {background:rgba(249,115,22,.28);color:#fdba74}
.project-card-stage--construction{background:rgba(239,68,68,.28);color:#fca5a5}
.project-card-stage--completed  {background:rgba(16,185,129,.28);color:#6ee7b7}
.project-card-stage--unbuilt    {background:rgba(107,114,128,.28);color:#d1d5db}

/* Body — flex column so the title pushes the footer to the bottom */
.project-card-body{
  flex:1;display:flex;flex-direction:column;
  padding:14px 18px 10px;text-align:start;
}

/* Publisher row — small avatar + name + year. Always a real link
 * (office page when approved publisher; user profile otherwise). */
.project-card-publisher{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;min-width:0;
  text-decoration:none;color:inherit;
}
.project-card-publisher-avatar{
  width:24px;height:24px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  border:1px solid var(--border-hover);
}
.project-card-publisher-avatar.is-mono{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--overlay-soft);color:var(--text-muted);font-size:11px;
}
.project-card-publisher-name{
  font-size:12px;font-weight:500;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  flex:1 1 auto;
}
.project-card-publisher.is-independent .project-card-publisher-name{
  color:var(--text-muted);
}
.project-card-publisher-dot{color:var(--text-muted);font-size:11px;flex-shrink:0}
.project-card-publisher-year{color:var(--text-muted);font-size:11px;flex-shrink:0}
.project-card-publisher-city{
  color:var(--text-muted);font-size:11px;flex-shrink:1;min-width:0;
  display:inline-flex;align-items:center;gap:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.project-card-publisher-city i{font-size:10px;color:var(--text-muted);flex-shrink:0}
.project-card:hover .project-card-publisher-name{color:var(--accent)}

/* Title — bold, line-clamped to two */
.project-card-title{
  font-size:16px;font-weight:600;line-height:1.4;color:var(--text-primary);
  margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* Stats footer — same shape as .post-footer */
.project-card-footer{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 16px;
  border-top:1px solid var(--border);
  background:transparent;
  font-size:11.5px;color:var(--text-muted);
}
.project-card-stat{
  display:inline-flex;align-items:center;gap:5px;line-height:1;
}
.project-card-stat i{font-size:11px}
/* Like colour comes from the global .like-color token. Dislikes are
 * no longer rendered on the card per the Apps-Cards audit; the global
 * .dislike-color rule still applies on the project detail page. */
.project-card-area{
  margin-inline-start:auto;
  color:var(--text-muted);
  white-space:nowrap;
}
/* Slot-reservation variant — renders an em-dash + icon when the
 * project has no area data so the footer's geometry stays locked
 * across the grid. visibility:hidden keeps the gap intact. */
.project-card-area.is-empty{visibility:hidden}

/* "Tour project →" verb pill — gold cousin of the post card's "Read post"
 * pill. Anchors the project-side vocabulary (Tour · Cite · Hire · Quote)
 * so a mixed-feed reader can tell at a glance what each card invites. */
.project-card-verb{
  display:inline-flex;align-items:center;gap:7px;
  margin:8px 16px 14px;padding:5px 12px;
  border-radius:99px;
  background:var(--accent-dim);
  border:1px solid rgba(205,161,44,.30);
  color:var(--accent);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  align-self:flex-start;flex-shrink:0;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.project-card-verb i{font-size:10px;color:var(--accent);transition:color .2s var(--ease)}
.project-card-verb-arrow{transition:transform .2s var(--ease)}
.project-card:hover .project-card-verb{
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1a1a;
}
.project-card:hover .project-card-verb i{color:#1a1a1a}
.project-card:hover .project-card-verb-arrow{transform:translateX(4px)}

/* Short description — line-clamped to 2 lines, sits between the title
 * and the footer. Mirrors .post-card-excerpt so the two cards read at
 * the same visual rhythm. */
.project-card-excerpt{
  font-size:13px;line-height:1.6;color:var(--text-muted);
  margin:8px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}

/* "For X · with Y, Z, +N" meta line — single line, ellipsis on
 * overflow. Sits between the excerpt and the stats footer when at
 * least one of organization / approved-collaborators exists. */
.project-card-with{
  margin:8px 0 0;
  font-size:11.5px;color:var(--text-muted);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.project-card-with strong{color:var(--text-secondary);font-weight:600}
.project-card-with-dot{margin:0 6px;opacity:.55}
.project-card-with-org,.project-card-with-collab{
  display:inline;
}

/* Compact modifier — used by tight columns like home/search's col-lg-3.
 * Hides the excerpt, the "for / with" meta line, and the verb pill so
 * the cover + publisher row + title + footer stats stay legible at
 * the smaller cell width. Don't fork the card — toggle this class. */
.project-card.is-compact .project-card-excerpt,
.project-card.is-compact .project-card-with,
.project-card.is-compact .project-card-verb{
  display:none;
}

/* ── Project specs card (custom-field schema) ──────────────────────
 * Sidebar card on view_project rendering creator-declared metadata
 * fields. Schema-only today — Step 7 will introduce the value model
 * and replace the muted placeholders with real entered values. The
 * row chrome (icon + label + value) reuses the .proj-fact pattern
 * still inline in view_project.html (extracted to this file in
 * Step 12). */
.proj-specs-card{padding:22px}
.proj-spec-pending{
  display:block;font-size:13px;color:var(--text-muted);
  font-weight:500;font-style:italic;line-height:1.4;
}
.proj-spec-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.proj-spec-chip{
  display:inline-flex;align-items:center;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:99px;padding:3px 10px;font-size:11px;color:var(--text-secondary);
}
/* Highlights the option chip the creator picked for a select field. */
.proj-spec-chip.is-selected{
  background:var(--accent-dim);border-color:rgba(205,161,44,.45);
  color:var(--accent);font-weight:700;
}
.proj-spec-file{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--accent);text-decoration:none;
}
.proj-spec-file:hover{text-decoration:underline}

/* ── Awards sidebar card (Step 24) — sits above Project facts on
 * view_project. Trophy medallion + title + granter+year meta. The
 * title is a link when the award row carries an award_url. */
.proj-awards-card{padding:18px}
.proj-awards-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-inline-start:6px;
  border-radius:99px;background:var(--accent-dim);color:var(--accent);
  font-size:10px;font-weight:700;border:1px solid rgba(205,161,44,.30);
}
.proj-award-row{
  display:flex;align-items:flex-start;gap:12px;padding:10px 0;
  border-bottom:1px dashed var(--border);
}
.proj-award-row:last-child{border-bottom:none;padding-bottom:0}
.proj-award-row:first-of-type{padding-top:4px}
.proj-award-medallion{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--accent);
  color:#1a1a1a;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;box-shadow:0 0 14px rgba(205,161,44,.30);
}
.proj-award-text{flex:1;min-width:0}
.proj-award-title{
  display:block;font-size:13.5px;font-weight:700;color:var(--text-primary);
  margin:0 0 2px;line-height:1.3;text-decoration:none;
}
a.proj-award-title:hover{color:var(--accent);text-decoration:underline}
.proj-award-meta{
  font-size:11px;color:var(--text-muted);margin:0;line-height:1.4;
}

/* ── Citations sidebar cards (Step 25) — "Inspired by" + "Cited by".
 * Each row is a clickable thumb + title + author line. Pending rows
 * (visible to source/cited creators only) show a clock icon and
 * inline approve/reject buttons for the cited creator. */
.proj-citations-card{padding:18px}
.proj-citation-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-inline-start:6px;
  border-radius:99px;background:var(--accent-dim);color:var(--accent);
  font-size:10px;font-weight:700;border:1px solid rgba(205,161,44,.30);
}
.proj-citation-row{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  text-decoration:none;color:inherit;
  border-bottom:1px dashed var(--border);
}
.proj-citation-row:last-child{border-bottom:none;padding-bottom:0}
.proj-citation-row:first-of-type{padding-top:4px}
.proj-citation-row[href]:hover .proj-citation-title{color:var(--accent)}
.proj-citation-row.is-pending{opacity:.85}
.proj-citation-thumb{
  width:48px;height:36px;flex-shrink:0;border-radius:6px;
  object-fit:cover;background:var(--bg-surface);
  border:1px solid var(--border);
}
.proj-citation-thumb.is-empty{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:14px;
}
.proj-citation-text{flex:1;min-width:0}
.proj-citation-title{
  font-size:13px;font-weight:600;color:var(--text-primary);
  margin:0 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.proj-citation-author{
  font-size:11px;color:var(--text-muted);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.proj-citation-actions{display:inline-flex;gap:5px;flex-shrink:0}
.proj-citation-actions form{margin:0}
/* Off-site inspirations — same row shape as on-platform citations,
 * but the small external-link glyph after the title signals the link
 * leaves Architectena. Description (one-liner) replaces the @username
 * sub-row and may wrap onto two lines. */
.proj-citation-row-ext .proj-citation-author{
  white-space:normal;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.proj-citation-ext-glyph{
  font-size:10px;color:var(--text-muted);margin-inline-start:6px;
  vertical-align:middle;
}
.proj-citation-row-ext:hover .proj-citation-ext-glyph{color:var(--accent)}
.proj-citation-thumb.is-expo{background:rgba(var(--accent-rgb),.10);color:var(--accent)}
.proj-citation-thumb.is-situ{background:rgba(59,130,246,.10);color:#3b82f6}

/* ── Awards editor on add/edit forms (Step 24) ────────────────────── */
.awards-section .awards-sub{font-size:12.5px;color:var(--text-muted);margin:4px 0 12px}
.award-row{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:10px;
}
.award-row-grid{
  display:grid;
  grid-template-columns:2fr 2fr 100px auto;
  gap:10px;align-items:end;
}
@media (max-width:640px){
  .award-row-grid{grid-template-columns:1fr 1fr; }
  .award-row-grid .award-cell--year{grid-column:span 1}
  .award-row-grid .award-row-remove{grid-column:span 2;justify-self:end}
}
.award-cell{display:flex;flex-direction:column;gap:4px}
.award-cell-label{
  font-size:10.5px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.award-cell input{
  width:100%;height:34px;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-primary);padding:0 11px;font-size:13px;font-family:inherit;
}
.award-cell--url{margin-top:8px}
/* Year stepper matches the 34px input row (scoped — the global
   .num-stepper stays 38px for the other forms that use it). Explicit
   flex-basis so the global flex:1 can't collapse it in this column. */
.award-row-grid .num-stepper{flex:0 0 34px;height:34px}
/* Remove button — identical to the custom-fields editor's remove button
   (rounded rect, not a circle) and 34px tall like the inputs, so it sits
   centred in the row instead of short and bottom-aligned. */
.award-row-remove{
  width:28px;height:34px;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.award-row-remove:hover{
  background:rgba(178,62,61,.10);
  color:var(--danger);
  border-color:rgba(178,62,61,.45);
}

/* ── Custom-fields editor on add/edit forms — sibling of the awards
 *    editor above. Relocated here from jobs.css so the projects form
 *    (which does NOT load jobs.css) styles its shared
 *    _custom_fields_editor.html partial; the jobs form loads style.css
 *    too, so its own .custom-field markup keeps these styles. */
.custom-fields-section{margin-top:8px}
.custom-fields-head{margin-bottom:14px}
.custom-fields-title{
  display:flex;align-items:center;gap:8px;
  margin:0 0 4px;font-size:14px;font-weight:700;
  color:var(--text-primary);
}
.custom-fields-title i{color:var(--accent);font-size:13px}
.custom-fields-sub{margin:0;font-size:12.5px;color:var(--text-muted);line-height:1.55}

.custom-field-row{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px;
  margin-bottom:8px;
}
.custom-field-row-grid{
  display:grid;
  grid-template-columns: 1fr 160px 130px 28px;
  gap:10px;
  align-items:end;
}
/* Jobs "Application form fields" rows add a 5th "Question?" cell (the one
   with the [data-question-cb] toggle). Give those rows a 5-column track so
   the extra cell + remove button stay on the row instead of overflowing the
   card. Projects custom fields (no Question column) keep the 4-col grid. */
.custom-field-row-grid:has([data-question-cb]){
  grid-template-columns: 1fr 150px 120px 120px 28px;
}
/* Projects use a simplified label + value editor (no type/required/options)
   — two equal inputs and the remove button. */
.custom-field-row-grid--lv{
  grid-template-columns: 1fr 1fr 28px;
}
@media (max-width:640px){
  .custom-field-row-grid,
  .custom-field-row-grid:has([data-question-cb]),
  .custom-field-row-grid--lv{grid-template-columns:1fr 1fr; }
  .custom-field-row-grid > .custom-field-remove{grid-column:2;justify-self:end}
}

.custom-field-cell{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.custom-field-cell-label{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);
}
.custom-field-cell input[type="text"],
.custom-field-cell select,
.custom-field-options textarea{
  width:100%;height:34px;padding:0 10px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-primary);font-size:12.5px;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.custom-field-options textarea{height:auto;padding:8px 10px;font-family:inherit;resize:vertical;min-height:60px}
.custom-field-cell input:focus,
.custom-field-cell select:focus,
.custom-field-options textarea:focus{
  outline:none;background:var(--bg-card);border-color:rgba(205,161,44,.45);
}

.custom-field-cell-required .custom-field-toggle{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 10px;margin:0;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:12.5px;color:var(--text-secondary);
  cursor:pointer;user-select:none;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.custom-field-cell-required .custom-field-toggle:hover{border-color:var(--border-hover);background:var(--bg-card)}
.custom-field-cell-required .custom-field-toggle input[type="checkbox"]{
  width:14px;height:14px;accent-color:var(--accent);cursor:pointer;margin:0;
}
.custom-field-cell-required .custom-field-toggle:has(input:checked){
  border-color:rgba(205,161,44,.45);color:var(--text-primary);
}

.custom-field-remove{
  width:28px;height:34px;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.custom-field-remove:hover{
  background:rgba(178,62,61,.10);
  color:var(--danger);
  border-color:rgba(178,62,61,.45);
}
.custom-field-options{display:flex;flex-direction:column;gap:6px;margin:10px 0 0}

/* ── Material chips (Step 19) — clickable on view_project's Project
 * facts card so visitors can browse all projects that use a material.
 * Uses the same shape as proj-credit-chip but lives independently so
 * future edits to credits chips don't drag materials with them. */
.proj-mat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.proj-mat-chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  background:var(--overlay-soft);border:1px solid var(--border);
  border-radius:99px;color:var(--text-secondary);
  font-size:11.5px;font-weight:500;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
}
.proj-mat-chip:hover{
  background:var(--accent-dim);color:var(--accent);
  border-color:rgba(205,161,44,.35);
}

/* ── /projects/materials/<slug>/ — material discovery page header. */
.material-detail-head{
  text-align:center;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:30px 18px 18px;border-bottom:1px solid var(--border);
}
.material-detail-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-dim);color:var(--accent);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 14px;border-radius:99px;margin:0;
  border:1px solid rgba(205,161,44,.30);
}
.material-detail-title{
  font-size:32px;font-weight:700;color:var(--text-primary);
  margin:8px 0 0;letter-spacing:-.005em;
}
.material-detail-sub{font-size:13px;color:var(--text-muted);margin:4px 0 12px}
.material-detail-head .arch-btn-ghost{font-size:12.5px;padding:6px 14px}

/* ── Project versions timeline (Step 20) — sits between the gallery
 * card and the description card on view_project. One chip per
 * ProjectVersion, ordered by version_number. The "All" chip clears
 * the filter; the active chip lights up gold. */
.proj-version-timeline{padding:14px 18px}
.proj-version-eyebrow{
  display:flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--accent);margin:0 0 10px;
}
.proj-version-eyebrow i{font-size:11px}
.proj-version-chips{display:flex;flex-wrap:wrap;gap:6px}
.proj-version-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:99px;padding:5px 12px;font-size:12px;font-weight:500;
  color:var(--text-secondary);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.proj-version-chip:hover{
  background:var(--accent-dim);color:var(--accent);
  border-color:rgba(205,161,44,.35);transform:translateY(-1px);
}
.proj-version-chip.is-active{
  background:var(--accent-dim);color:var(--accent);
  border-color:rgba(205,161,44,.55);font-weight:700;
}
.proj-version-chip-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:18px;padding:0 6px;border-radius:99px;
  background:rgba(205,161,44,.12);color:var(--accent);
  font-size:10px;font-weight:800;letter-spacing:.04em;
}

/* ── Versions editor on edit_project (Step 20) ────────────────────── */
.proj-versions-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px}
.proj-versions-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;
}
.proj-versions-row-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:22px;padding:0 8px;border-radius:99px;
  background:var(--accent-dim);color:var(--accent);
  font-size:11px;font-weight:800;letter-spacing:.04em;
}
.proj-versions-row-stage{font-weight:600;color:var(--text-primary)}
.proj-versions-row-title{color:var(--text-secondary);font-style:italic}
.proj-versions-row-count{
  margin-left:auto;font-size:11.5px;color:var(--text-muted);
}
.proj-versions-row-form{display:inline-flex}
.proj-versions-row-del{
  width:24px;height:24px;border-radius:50%;
  background:transparent;border:1px solid var(--border);
  color:var(--text-muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;transition:background .15s,color .15s,border-color .15s;
}
.proj-versions-row-del:hover{
  background:rgba(248,113,113,.10);color:var(--danger);
  border-color:rgba(248,113,113,.45);
}
.proj-versions-add{
  background:var(--bg-card);border:1px dashed var(--border);
  border-radius:var(--radius-sm);padding:8px 14px;margin-bottom:14px;
}
.proj-versions-add summary{
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent);
  list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.proj-versions-add summary::-webkit-details-marker{display:none}
.proj-versions-add[open] summary{margin-bottom:10px}
.proj-versions-add-form{display:flex;flex-direction:column;gap:10px}
.proj-versions-add-grid{display:grid;grid-template-columns:1fr 2fr;gap:10px}
@media (max-width:560px){.proj-versions-add-grid{grid-template-columns:1fr}}
.proj-versions-add-form select,
.proj-versions-add-form input,
.proj-versions-add-form textarea{
  width:100%;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-primary);padding:8px 11px;font-size:13px;font-family:inherit;
}
.proj-versions-add-label{
  display:block;font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-weight:600;
}
.proj-versions-add-form .arch-cta{align-self:flex-start;font-size:12.5px}

/* Version picker on the attachment dropzone — sits ABOVE the dropzone
 * itself so the user picks the target stage before dragging files. */
.proj-attach-version-pick{display:block;margin:0 0 10px}
.proj-attach-version-pick select{
  width:100%;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-primary);padding:8px 11px;font-size:13px;
}

/* ── Gallery kind filter chips (Step 21) — sit inside the gallery
 * card above the carousel. AND-combine with the version chips so the
 * visible set is (matching version) ∩ (matching kind). */
.proj-gallery-kinds{display:flex;flex-wrap:wrap;gap:6px;padding:8px 4px 14px}
.proj-gallery-kind{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:99px;padding:5px 12px;font-size:11.5px;font-weight:500;
  color:var(--text-secondary);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.proj-gallery-kind:hover{
  background:var(--accent-dim);color:var(--accent);
  border-color:rgba(205,161,44,.35);transform:translateY(-1px);
}
.proj-gallery-kind.is-active{
  background:var(--accent-dim);color:var(--accent);
  border-color:rgba(205,161,44,.55);font-weight:700;
}
.proj-gallery-kind-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 6px;border-radius:99px;
  background:rgba(205,161,44,.12);color:var(--accent);
  font-size:10px;font-weight:800;
}

/* ── Staged-file kind cycler on add/edit forms — small badge button
 * on each li.arch-attach-staged item. Click cycles the kind label;
 * a hidden input next to it submits the value as attachment_kind[]. */
.arch-staged-kind-wrap{display:inline-flex;align-items:center}
.arch-staged-kind{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--accent-dim);color:var(--accent);
  border:1px solid rgba(205,161,44,.32);border-radius:99px;
  padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;
  font-family:inherit;line-height:1;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.arch-staged-kind:hover{
  background:var(--accent);color:#1a1a1a;
  border-color:var(--accent);transform:translateY(-1px);
}
.arch-staged-kind i{font-size:10px}

/* ─── Projects detail page (extracted from view_project.html, Step 12) ──
 * Verbatim cut-and-paste from the inline <style> block that previously
 * lived at the foot of templates/projects/view_project.html. Selector
 * names and order preserved so a side-by-side diff returns empty.
 * ────────────────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────────────
 * view_project — presentation page.
 *
 * Hero+sidebar frame (same family as view_job, view_post, view_office)
 * with two project-specific moves:
 *   - the gallery is the centerpiece (carousel + thumbnail strip)
 *   - the Files tray uses the unified attachment-tile pattern from
 *     view_post so any visitor can see / download every asset at a
 *     glance, which is the page's core job.
 * ─────────────────────────────────────────────────────────────────── */

/* ── Hero ──────────────────────────────────────────────────────────── */
.proj-hero{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.3),0 0 0 1px rgba(205,161,44,.18)}
.proj-hero-cover{position:relative;height:320px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.proj-hero-cover--empty{background:var(--bg-surface)}
.proj-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,23,.30) 0%,rgba(15,17,23,.94) 100%)}
.proj-hero-back{position:absolute;top:18px;left:22px;z-index:2;color:#fff;text-decoration:none;font-size:13px;background:rgba(0,0,0,.4);padding:6px 12px;border-radius:99px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .15s}
.proj-hero-back:hover{background:rgba(0,0,0,.6);color:var(--accent)}
.proj-hero-flag{position:absolute;top:18px;right:22px;z-index:2;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:99px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:6px}
.proj-hero-flag.is-private{background:rgba(248,113,113,.85)}
.proj-hero-flag.is-draft{background:rgba(251,146,60,.85)}
.proj-hero-content{position:relative;z-index:1;padding:28px 32px 26px;width:100%}
.proj-hero-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(205,161,44,.18);color:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 14px;border-radius:99px;margin-bottom:12px;border:1px solid rgba(205,161,44,.30);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.proj-hero-content h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.2;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.proj-hero-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:rgba(255,255,255,.85)}
.proj-hero-meta span i{margin-right:5px;color:var(--accent)}

/* Attribution row — promotes the Credits card to the hero. Stack of
 * overlapping avatars (creator → publisher → collaborators) on the start
 * side; a short byline on the end side reading "by Studio · with @anna,
 * @luca (+1) · for Akkar Family". Sits below the meta row, above the
 * fold of the cover image. */
.proj-hero-attrib{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.proj-hero-attrib-stack{display:inline-flex;align-items:center}
.proj-hero-attrib-stack .proj-hero-attrib-avatar{margin-inline-start:-8px;transition:transform .2s var(--ease)}
.proj-hero-attrib-stack .proj-hero-attrib-avatar:first-child{margin-inline-start:0}
.proj-hero-attrib-avatar{display:inline-flex;width:30px;height:30px;border-radius:50%;overflow:hidden;border:2px solid rgba(0,0,0,.55);box-shadow:0 4px 10px rgba(0,0,0,.30);background:var(--bg-surface);flex-shrink:0}
.proj-hero-attrib-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.proj-hero-attrib-avatar:hover{transform:translateY(-2px) scale(1.06);z-index:1}
.proj-hero-attrib-text{font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.5;min-width:0}
.proj-hero-attrib-pre{color:rgba(255,255,255,.55);font-size:11.5px;font-weight:500}
.proj-hero-attrib-name{color:#fff;font-weight:600;text-decoration:none}
.proj-hero-attrib-name:hover{color:var(--accent)}
.proj-hero-attrib-sep{color:rgba(255,255,255,.30);margin:0 5px}

/* ── Section title — uppercase accent label with a short gold underline. */
.proj-section-title{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;padding-bottom:10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);position:relative}
.proj-section-title::after{content:"";position:absolute;left:0;bottom:-1px;width:38px;height:2px;background:var(--accent);border-radius:2px}
.proj-section-title i{font-size:13px}

/* ── Gallery ───────────────────────────────────────────────────────── */
.proj-gallery-card{padding:14px}
.proj-gallery-toolbar{display:flex;align-items:center;gap:12px;padding:0 4px 10px;font-size:12px}
.proj-gallery-count{display:inline-flex;align-items:center;gap:7px;color:var(--text-muted);font-weight:500;letter-spacing:.02em}
.proj-gallery-count i{color:var(--accent);font-size:13px}
.proj-gallery-viewall{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;background:var(--accent-dim);color:var(--accent);border:1px solid rgba(205,161,44,.30);border-radius:99px;padding:5px 14px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.proj-gallery-viewall:hover{background:var(--accent);color:#1a1a1a;border-color:var(--accent);transform:translateY(-1px)}
.proj-gallery-viewall i{font-size:11px}
.proj-carousel{border-radius:12px;overflow:hidden;background:#000}
.proj-carousel-img{display:block;width:100%;height:480px;object-fit:contain;background:#000;cursor:zoom-in}
.proj-cover-placeholder{height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--bg-surface);color:var(--text-muted)}
.proj-cover-placeholder i{font-size:42px}
.proj-cover-placeholder span{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.proj-carousel .carousel-control-prev,.proj-carousel .carousel-control-next{width:48px;opacity:0;transition:opacity .2s}
.proj-carousel:hover .carousel-control-prev,.proj-carousel:hover .carousel-control-next{opacity:.85}
.proj-carousel .carousel-control-prev-icon,.proj-carousel .carousel-control-next-icon{background-color:rgba(0,0,0,.55);border-radius:99px;padding:14px;background-size:50% 50%;background-repeat:no-repeat;background-position:center;width:36px;height:36px}

/* Thumbnail strip — small clickable buttons that drive the carousel.
 * Active thumb gets a gold border + soft halo to read as the current
 * frame. Strip wraps if there are many photos. */
.proj-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.proj-thumb{padding:0;border:2px solid transparent;border-radius:8px;background:transparent;cursor:pointer;width:78px;height:58px;overflow:hidden;transition:border-color .15s,box-shadow .25s var(--ease),transform .15s}
.proj-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.proj-thumb:hover{transform:translateY(-2px);border-color:rgba(205,161,44,.45)}
.proj-thumb.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(205,161,44,.14),0 4px 12px rgba(205,161,44,.22)}

/* ── Fullscreen gallery overlay ──────────────────────────────────────
 * Sits on top of the page (z-index above the navbar but below the
 * lightbox so the lightbox can still pop above when a tile is clicked).
 * Grid of every photo, scrollable. Mobile collapses to a single column;
 * desktop fits 3-4 per row. Click a tile → close overlay + open lightbox
 * at that index. */
.proj-gallery-overlay{position:fixed;inset:0;background:rgba(8,10,14,.96);z-index:9000;overflow-y:auto;padding:30px 28px 60px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.proj-gallery-overlay[hidden]{display:none}
.proj-gallery-overlay-close{position:fixed;top:20px;right:24px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.45);color:#fff;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .15s;z-index:1}
.proj-gallery-overlay-close:hover{background:rgba(0,0,0,.7);border-color:var(--accent);color:var(--accent);transform:scale(1.06)}
.proj-gallery-overlay-head{max-width:1200px;margin:0 auto 22px;padding:0 4px}
.proj-gallery-overlay-title{font-size:22px;font-weight:700;color:#fff;margin:0 0 4px;letter-spacing:.01em}
.proj-gallery-overlay-sub{font-size:12px;color:rgba(255,255,255,.55);margin:0;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.proj-gallery-overlay-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.proj-overlay-tile{padding:0;border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden;cursor:zoom-in;background:#000;aspect-ratio:4/3;position:relative;transition:transform .18s var(--ease),border-color .18s,box-shadow .25s var(--ease)}
.proj-overlay-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease)}
.proj-overlay-tile:hover{transform:translateY(-3px);border-color:rgba(205,161,44,.55);box-shadow:0 12px 28px rgba(0,0,0,.5),0 0 0 1px rgba(205,161,44,.25)}
.proj-overlay-tile:hover img{transform:scale(1.03)}
.proj-overlay-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:640px){
  .proj-gallery-overlay{padding:24px 14px 40px}
  .proj-gallery-overlay-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .proj-gallery-overlay-title{font-size:18px}
}

/* ── Reactions strip ───────────────────────────────────────────────── */
.proj-reactions-card{padding:10px 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.proj-reactions-group{display:inline-flex;align-items:center;background:var(--bg-surface);border:1px solid var(--border);border-radius:99px;overflow:hidden}
.proj-reactions-group form{margin:0;display:inline-flex}
.proj-reactions-group .proj-react-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;color:var(--text-secondary);font-size:13px;font-weight:600;padding:7px 16px;cursor:pointer;transition:background .15s,color .15s}
.proj-reactions-group .proj-react-btn:hover{background:var(--accent-dim);color:var(--accent)}
.proj-reactions-group .proj-react-btn i{font-size:13px}
.proj-react-divider{width:1px;align-self:stretch;background:var(--border)}
.proj-react-stat{color:var(--text-muted);font-size:13px;display:inline-flex;align-items:center;gap:6px}
.proj-react-stat i{color:var(--accent)}
.proj-react-secondary{margin-inline-start:auto;font-size:12.5px;height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:7px}
.proj-react-cta{height:36px;font-size:12.5px;padding:0 16px}
/* When there's no Files anchor, push the comment CTA to the end alone */
.proj-reactions-card .proj-react-cta:last-child:not(.proj-react-secondary + .proj-react-cta){margin-inline-start:auto}

/* ── Description card — readable spine ─────────────────────────────── */
.proj-description-card{padding:24px 28px}
.proj-description-text{color:var(--text-secondary);font-size:14.5px;line-height:1.85;text-align:justify;hyphens:auto}
.proj-description-text p{margin-bottom:1em}
.proj-description-text p:last-child{margin-bottom:0}

/* ── More-details toggle ───────────────────────────────────────────── */
.proj-details-card{padding:0;overflow:hidden}
.proj-details-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:14px 22px;background:transparent;border:none;color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.proj-details-toggle:hover{background:var(--accent-dim);color:var(--accent)}
.proj-details-toggle i:first-child{color:var(--accent);font-size:14px}
.proj-details-toggle span{flex:1;text-align:start;letter-spacing:.02em}
.proj-details-caret{transition:transform .2s var(--ease)}
.proj-details-toggle[aria-expanded="true"] .proj-details-caret{transform:rotate(180deg)}
.proj-details-content{padding:0 26px 22px;color:var(--text-secondary);font-size:14px;line-height:1.7;border-top:1px solid var(--border);padding-top:18px;margin-top:0}
.proj-details-content img{max-width:100%;height:auto;border-radius:8px;margin:10px 0}
.proj-details-content a{color:var(--accent)}

/* ── Sign-in banner ────────────────────────────────────────────────── */
.proj-signin-banner{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.proj-signin-title{font-size:14px;font-weight:600;color:var(--text-primary);margin:0 0 2px}
.proj-signin-sub{font-size:12.5px;color:var(--text-muted);margin:0}

/* ── Comments ──────────────────────────────────────────────────────── */
.proj-comments-card{padding:24px 28px}
.proj-comments-count{margin-left:auto;background:var(--accent-dim);color:var(--accent);padding:2px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;border:1px solid rgba(205,161,44,.30)}
.proj-comment{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border)}
.proj-comment:last-child{border-bottom:none;padding-bottom:0}
.proj-comment:first-of-type{padding-top:0}
.proj-comment-avatar img{width:42px;height:42px;border-radius:12px;object-fit:cover;flex-shrink:0;border:1px solid var(--border);box-shadow:0 0 8px rgba(205,161,44,.16);transition:box-shadow .2s,transform .25s var(--ease)}
.proj-comment-avatar:hover img{transform:translateY(-1px);box-shadow:0 0 14px rgba(205,161,44,.28)}
.proj-comment-body{flex:1;min-width:0}
.proj-comment-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.proj-comment-name{font-size:13px;font-weight:600;color:var(--text-primary);text-decoration:none}
.proj-comment-name:hover{color:var(--accent)}
.proj-comment-time{color:var(--text-muted);font-size:11px}
.proj-comment-subject{font-size:14px;font-weight:600;color:var(--accent);margin:2px 0}
.proj-comment-text{font-size:14px;line-height:1.6;color:var(--text-secondary);margin:4px 0;word-break:break-word}
.proj-comment-cover{max-width:60%;margin-top:8px;border-radius:10px;cursor:zoom-in}
.proj-comment-actions{margin-top:6px;display:flex;gap:8px}
.proj-comment-react{font-size:12px;padding:3px 10px}
.proj-comment-form-card{padding:24px 28px}
/* Comment form — mirrors the post comment form so projects + posts feel
 * like one family. Subject input on top, locked-height textarea below,
 * action row (photo button → submit CTA) at the bottom. */
.comment-body-textarea{resize:none;height:calc(6 * 1.55em + 22px);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);padding:11px 14px;font-size:14px;line-height:1.55;width:100%;transition:border-color .15s,box-shadow .25s var(--ease)}
.comment-body-textarea:focus{border-color:rgba(205,161,44,.45);outline:none;box-shadow:0 0 0 3px rgba(205,161,44,.10)}
.comment-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;justify-content:flex-end}
.comment-photo-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Photo button — same gold CTA look as the submit button so the action
 * row reads as a matched pair (icon + label CTAs side by side). */
.comment-photo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;height:40px;border-radius:var(--radius-sm);background:var(--accent-dim);color:var(--accent);border:1px solid rgba(205,161,44,.45);font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;margin:0;box-shadow:0 0 0 0 rgba(205,161,44,0),0 1px 6px rgba(205,161,44,.18);transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease)}
.comment-photo-btn:hover{background:var(--accent);color:#1a1a1a;border-color:var(--accent);box-shadow:0 0 0 3px rgba(205,161,44,.14),0 4px 12px rgba(205,161,44,.32);transform:translateY(-1px)}
.comment-photo-btn:active{transform:translateY(0);box-shadow:0 1px 6px rgba(205,161,44,.22)}
.comment-photo-btn i{font-size:14px;line-height:1}
/* Icon-only variant — same gold pill, square footprint, no label. */
.comment-photo-btn--icon{width:40px;padding:0}
.comment-photo-input:focus + .comment-photo-btn,.comment-photo-btn:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(205,161,44,.14)}
.comment-photo-preview{display:inline-flex;align-items:center;margin-inline-end:auto;position:relative}
.comment-photo-preview img{width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid var(--border-hover);box-shadow:0 0 8px rgba(205,161,44,.16)}
.comment-photo-clear{position:absolute;top:-6px;inset-inline-end:-6px;width:20px;height:20px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-hover);color:var(--text-muted);font-size:10px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:color .15s,border-color .15s,background .15s}
.comment-photo-clear:hover{color:var(--danger);border-color:var(--danger);background:rgba(248,113,113,.10)}

/* ── Credits ───────────────────────────────────────────────────────── */
.proj-credits-card{padding:22px}
.proj-credit-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;color:inherit;text-decoration:none;border-bottom:1px solid var(--border);transition:background .15s,padding .15s}
.proj-credit-row:last-child{border-bottom:none}
.proj-credit-row:hover{background:transparent}
.proj-credit-row[href]:hover .proj-credit-name{color:var(--accent)}
.proj-credit-row--hero{padding:6px 0 14px;align-items:center}
.proj-credit-row.is-pending{opacity:.75}
.proj-credit-avatar{width:50px;height:50px;border-radius:14px;object-fit:cover;flex-shrink:0;box-shadow:0 0 12px rgba(205,161,44,.20);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.proj-credit-avatar--co{width:40px;height:40px;border-radius:8px;box-shadow:none;border:1px solid var(--border)}
.proj-credit-row[href]:hover .proj-credit-avatar{transform:translateY(-1px);box-shadow:0 0 18px rgba(205,161,44,.32)}
.proj-credit-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-dim);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;border:1px solid rgba(205,161,44,.20)}
.proj-credit-text{min-width:0;flex:1}
.proj-credit-role{display:block;font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;font-weight:700}
.proj-credit-name{font-size:13.5px;font-weight:600;color:var(--text-primary);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.proj-credit-handle{display:block;color:var(--text-muted);font-size:11px;margin-top:1px}
.proj-credit-row--collabs{align-items:flex-start}
.proj-credit-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.proj-credit-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;background:var(--overlay-soft);border:1px solid var(--border);color:var(--text-secondary);font-size:11.5px;font-weight:500;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.proj-credit-chip i{font-size:9px;color:var(--accent)}
.proj-credit-chip:hover{background:var(--accent-dim);color:var(--accent);border-color:rgba(205,161,44,.30)}
/* Pending cooperation chip — visible to the creator while a collaborator
 * hasn't approved yet. Dashed amber edge with a clock icon. */
.proj-credit-chip.is-pending{background:rgba(251,146,60,.10);border:1px dashed rgba(251,146,60,.45);color:#fb923c}
.proj-credit-chip.is-pending i{color:#fb923c}
.proj-credit-chip.is-pending:hover{background:rgba(251,146,60,.16);color:#fb923c;border-color:rgba(251,146,60,.55)}

/* Inline cooperation approval strip — shown only to the named party.
 * One short text line + tiny ✓ / ✕ icon buttons. Sits under the chips. */
.proj-coop-approve{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);border-radius:99px;font-size:11.5px}
.proj-coop-approve-text{color:var(--text-secondary);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-coop-approve-text i{color:#4ade80;margin-right:5px}
.proj-coop-btn{width:24px;height:24px;border-radius:50%;border:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;line-height:1;transition:transform .15s,box-shadow .2s var(--ease)}
.proj-coop-btn.is-approve{background:rgba(74,222,128,.18);color:#4ade80}
.proj-coop-btn.is-approve:hover{background:#4ade80;color:#0f1117;transform:scale(1.08);box-shadow:0 4px 10px rgba(74,222,128,.30)}
.proj-coop-btn.is-reject{background:rgba(248,113,113,.15);color:#f87171}
.proj-coop-btn.is-reject:hover{background:#f87171;color:#fff;transform:scale(1.08);box-shadow:0 4px 10px rgba(248,113,113,.30)}

/* ── Project facts ─────────────────────────────────────────────────── */
.proj-facts-card{padding:22px}
.proj-fact{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px dashed var(--border)}
.proj-fact:last-child{border-bottom:none;padding-bottom:0}
.proj-fact:first-of-type{padding-top:0}
.proj-fact > i{color:var(--accent);font-size:13px;width:18px;text-align:center;margin-top:3px}
.proj-fact > div{min-width:0;flex:1}
.proj-fact-label{display:block;font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px;font-weight:600}
.proj-fact strong{display:block;font-size:13px;color:var(--text-primary);font-weight:600;line-height:1.4}
.proj-fact small{display:block;color:var(--text-muted);font-size:11px;margin-top:1px}

/* ── Files tray — borrows the post-attach tile pattern. Fits 3-up in
 * the sidebar at compact sizes; image tiles open the lightbox, file
 * tiles download. */
.proj-files-card{padding:18px}
/* ── 3D model card (Step 22) — full-width inline <model-viewer>
 * cards rendered ABOVE the file-tile grid for any .glb/.gltf
 * attachment. The web component upgrades when its script loads;
 * until then the <slot name="poster"> link gives a download path. */
.proj-attach-3d-card{
  position:relative;margin:0 0 14px;border-radius:12px;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.proj-attach-3d-viewer{
  display:block;width:100%;height:320px;background:var(--bg-card);
  --poster-color:transparent;
}
.proj-attach-3d-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  text-decoration:none;color:var(--accent);
  background:var(--bg-surface);
  font-size:14px;font-weight:600;letter-spacing:.02em;
}
.proj-attach-3d-fallback i{font-size:38px;color:var(--accent)}
.proj-attach-3d-fallback small{
  display:block;font-size:11px;font-weight:400;color:var(--text-muted);
  margin-top:4px;
}
.proj-attach-3d-fallback:hover{color:var(--text-primary)}
.proj-attach-3d-name{
  margin:0;padding:8px 14px;font-size:11.5px;color:var(--text-muted);
  background:var(--bg-surface);border-top:1px solid var(--border);
  display:flex;align-items:center;gap:7px;
}
.proj-attach-3d-name i{color:var(--accent);font-size:11px}

.proj-attach-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-inline-start:6px;border-radius:99px;background:var(--accent-dim);color:var(--accent);font-size:10px;font-weight:700;border:1px solid rgba(205,161,44,.30)}
.proj-attach-tray{display:grid;grid-template-columns:repeat(3,78px);column-gap:0;row-gap:14px;justify-content:space-evenly}
.proj-attach-tile{position:relative;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;transition:border-color .15s,transform .2s,box-shadow .25s var(--ease)}
.proj-attach-tile:hover{border-color:rgba(205,161,44,.45);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 1px rgba(205,161,44,.18)}
.proj-attach-thumb{position:relative;width:100%;aspect-ratio:1/1;background:var(--bg-card);display:flex;align-items:center;justify-content:center;overflow:hidden}
.proj-attach-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .35s var(--ease)}
.proj-attach-tile:hover .proj-attach-thumb img{transform:scale(1.04)}
.proj-attach-badge{background:linear-gradient(135deg,var(--cat-c) 0%,var(--cat-c-dark) 100%);--cat-c:#475569;--cat-c-dark:#334155}
.proj-attach-ext{font-size:13px;font-weight:800;color:#fff;letter-spacing:.04em;font-family:'Poppins',system-ui,sans-serif;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.proj-attach-meta{padding:5px 6px 6px;display:flex;flex-direction:column;min-width:0}
.proj-attach-name{font-size:10.5px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.proj-attach-tile:hover .proj-attach-name{color:var(--accent)}
/* Per-extension colours — same palette as view_post + file-preview.js */
.proj-attach-badge[data-ext="pdf"]{--cat-c:#ef4444;--cat-c-dark:#b91c1c}
.proj-attach-badge[data-ext="doc"],.proj-attach-badge[data-ext="docx"],.proj-attach-badge[data-ext="rtf"],.proj-attach-badge[data-ext="odt"]{--cat-c:#2563eb;--cat-c-dark:#1d4ed8}
.proj-attach-badge[data-ext="txt"]{--cat-c:#64748b;--cat-c-dark:#475569}
.proj-attach-badge[data-ext="xls"],.proj-attach-badge[data-ext="xlsx"],.proj-attach-badge[data-ext="csv"],.proj-attach-badge[data-ext="ods"]{--cat-c:#16a34a;--cat-c-dark:#15803d}
.proj-attach-badge[data-ext="ppt"],.proj-attach-badge[data-ext="pptx"],.proj-attach-badge[data-ext="odp"]{--cat-c:#f97316;--cat-c-dark:#c2410c}
.proj-attach-badge[data-ext="dwg"],.proj-attach-badge[data-ext="dxf"],.proj-attach-badge[data-ext="rvt"],.proj-attach-badge[data-ext="rfa"]{--cat-c:#eab308;--cat-c-dark:#a16207}
.proj-attach-badge[data-ext="skp"],.proj-attach-badge[data-ext="3dm"],.proj-attach-badge[data-ext="ifc"]{--cat-c:#0ea5e9;--cat-c-dark:#0369a1}
.proj-attach-badge[data-ext="obj"],.proj-attach-badge[data-ext="stl"],.proj-attach-badge[data-ext="dae"],.proj-attach-badge[data-ext="gh"]{--cat-c:#10b981;--cat-c-dark:#047857}
.proj-attach-badge[data-ext="psd"]{--cat-c:#1d4ed8;--cat-c-dark:#1e3a8a}
.proj-attach-badge[data-ext="ai"],.proj-attach-badge[data-ext="eps"]{--cat-c:#fb923c;--cat-c-dark:#c2410c}
.proj-attach-badge[data-ext="indd"]{--cat-c:#be185d;--cat-c-dark:#831843}
.proj-attach-badge[data-ext="zip"],.proj-attach-badge[data-ext="rar"],.proj-attach-badge[data-ext="7z"],.proj-attach-badge[data-ext="tar"],.proj-attach-badge[data-ext="gz"]{--cat-c:#a855f7;--cat-c-dark:#7e22ce}
.proj-attach-badge[data-ext="mp4"],.proj-attach-badge[data-ext="mov"],.proj-attach-badge[data-ext="webm"],.proj-attach-badge[data-ext="mkv"]{--cat-c:#db2777;--cat-c-dark:#9d174d}
.proj-attach-badge[data-ext="mp3"],.proj-attach-badge[data-ext="wav"],.proj-attach-badge[data-ext="ogg"],.proj-attach-badge[data-ext="m4a"]{--cat-c:#06b6d4;--cat-c-dark:#0e7490}

/* ── Map card — small Leaflet tile that shows the project's location.
 * Sits between Project facts and Files in the sidebar. Tile uses OSM
 * directly (no API key); the dark overlay knocks the map's bright
 * colours back so it sits next to the gold-haloed surf cards calmly. */
.proj-map-card{padding:18px}
.proj-map{height:180px;border-radius:10px;overflow:hidden;border:1px solid var(--border);margin-top:6px;background:var(--bg-surface)}
.proj-map .leaflet-container{background:var(--bg-surface)}
/* Soft dark wash so the map's bright OSM palette sits in our dark theme.
 * Pointer-events stay on the underlying tiles so pan/zoom still work. */
.proj-map .leaflet-tile-pane{filter:brightness(.86) contrast(1.05) saturate(.85)}
.proj-map-link{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:11.5px;color:var(--accent);text-decoration:none;letter-spacing:.02em}
.proj-map-link i{font-size:10px}
.proj-map-link:hover{color:var(--text-primary)}
/* Override Leaflet's default attribution box so it blends with the dark theme. */
.proj-map .leaflet-control-attribution{background:rgba(15,17,23,.78);color:var(--text-muted);font-size:9.5px;padding:1px 6px}
.proj-map .leaflet-control-attribution a{color:var(--accent)}

/* ── Report card ───────────────────────────────────────────────────── */
.proj-report-card{padding:14px 18px}

/* ── /projects/map/ — full-bleed world map of every public project ──
 * Step 18. Renders a single Leaflet map with optional clustering when
 * the markercluster plugin is vendored. The header strip lives above
 * the canvas; the canvas eats the remaining viewport. Marker popups
 * use a small card layout (thumb + title + city + view link). */
.proj-map-page{display:flex;flex-direction:column;gap:14px;padding:18px 22px 22px}
.proj-map-page-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.proj-map-page-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--accent);margin:0 0 4px;
}
.proj-map-page-eyebrow i{font-size:11px}
.proj-map-page-title{font-size:24px;font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.005em}
.proj-map-page-sub{font-size:12.5px;color:var(--text-muted);margin:4px 0 0}
.proj-map-page-canvas{
  height:calc(100vh - 220px);height:calc(100dvh - 220px);min-height:480px;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:var(--bg-surface);
  box-shadow:0 8px 26px rgba(0,0,0,.22);
}
.proj-map-page-canvas .leaflet-tile-pane{filter:brightness(.86) contrast(1.05) saturate(.85)}
.proj-map-page-canvas .leaflet-control-attribution{
  background:rgba(15,17,23,.78);color:var(--text-muted);font-size:9.5px;padding:1px 6px;
}
.proj-map-page-canvas .leaflet-control-attribution a{color:var(--accent)}
.proj-map-page-empty{
  background:var(--bg-card);border:1px dashed var(--border);
  border-radius:12px;padding:22px;text-align:center;color:var(--text-muted);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.proj-map-page-empty i{font-size:28px;color:var(--accent)}
.proj-map-page-empty h4{font-size:15px;color:var(--text-primary);margin:0}
.proj-map-page-empty p{font-size:13px;margin:0 0 4px;max-width:480px}

/* Marker popup — compact card with thumb on top, meta below. */
.proj-map-popup{display:flex;flex-direction:column;gap:6px;min-width:200px}
.proj-map-popup-thumb{
  width:100%;height:112px;object-fit:cover;border-radius:8px;
  background:var(--bg-surface);
}
.proj-map-popup-thumb.is-empty{
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:22px;
}
.proj-map-popup-title{
  font-size:13px;font-weight:700;color:var(--text-primary);
  margin:2px 0 0;line-height:1.3;
}
.proj-map-popup-city{
  font-size:11.5px;color:var(--text-muted);margin:0;
  display:flex;align-items:center;gap:5px;
}
.proj-map-popup-city i{color:var(--accent);font-size:10px}
.proj-map-popup-link{
  display:inline-flex;align-items:center;gap:5px;margin-top:4px;
  font-size:12px;font-weight:600;color:var(--accent);text-decoration:none;
}
.proj-map-popup-link:hover{text-decoration:underline}
.proj-map-popup-link i{font-size:10px}

@media (max-width:768px){
  .proj-hero-cover{height:220px}
  .proj-hero-content{padding:18px 18px 16px}
  .proj-hero-content h1{font-size:22px}
  .proj-hero-meta{gap:10px;font-size:11px}
  .proj-hero-attrib{margin-top:10px;gap:8px}
  .proj-hero-attrib-text{font-size:11.5px}
  .proj-hero-attrib-avatar{width:26px;height:26px}
  .proj-carousel-img,.proj-cover-placeholder{height:300px}
  .proj-thumb{width:64px;height:48px}
  .proj-description-card,.proj-comments-card,.proj-comment-form-card{padding:18px 20px}
  .proj-description-text{font-size:14px;text-align:left}
  .proj-comment-cover{max-width:100%}
  .proj-credit-avatar{width:44px;height:44px;border-radius:12px}
}

/* view project */
.project-p-top h3{color:var(--accent)}
.project-like-form-container form button,.project-dislike-form-container form button,.project-views-counter button,.project-private-toggle button,.project-reports-counter button{background-color:var(--bg-surface);padding:5px;height:42px;width:100%;border-radius:var(--radius-sm);margin-bottom:8px;border:1px solid var(--border);transition:background .15s}
.project-like-form-container form button:hover,.project-dislike-form-container form button:hover,.project-views-counter button:hover,.project-private-toggle button:hover,.project-reports-counter button:hover{background-color:var(--accent-dim)}
.project-like-form-container,.project-dislike-form-container,.project-views-counter,.project-private-toggle,.project-reports-counter{transition:transform .3s}
.project-like-form-container:hover,.project-dislike-form-container:hover,.project-views-counter:hover,.project-private-toggle:hover,.project-reports-counter:hover{transform:translateX(-8px)}
.project-p-data-top span{color:var(--text-muted);margin:8px;font-size:15px}
.project-p-data-top small{margin:8px}
.project-photo{margin-bottom:14px;max-height:620px;min-height:620px}
.project-photo img{max-width:100%;object-fit:cover;max-height:610px}
.project-photo-description{margin-bottom:14px;background-color:var(--overlay-soft);padding:14px;border-radius:var(--radius-md)}
.project-photo-description p{text-align:justify;color:var(--text-secondary)}
.project-files{width:100%;text-align:center}
.project-files-file a{width:100%;max-width:100%;margin-bottom:8px;display:inline-block;white-space:nowrap;text-overflow:ellipsis;background-color:var(--bg-surface);overflow-x:hidden;border-radius:var(--radius-sm);color:var(--text-secondary);transition:all .2s;padding:8px 12px}
.project-files-file a:hover{background-color:var(--accent-dim);color:var(--accent)}
.project-see-more-button{text-align:center;width:100%;margin:20px 0}
.project-see-more-div{border:none!important}
.project-see-more-div .card-body{padding:40px;background-color:var(--bg-base);border:none!important}

/* offices — listing card, form, detail page, work-fields dropdown,
 * and print stylesheet all moved to static/css/offices.css in
 * Step 5 of the offices roadmap. The shared rules below stay here:
 *   * .navbar-link-pill — also used by the navbar Groups badge.
 *   * .arch-form-banner — used by add_office, manage_staff, and
 *     other form shells site-wide.
 */
.navbar-link-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 6px;margin-inline-start:6px;
  border-radius:99px;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--accent);
  color:#1a1a1a;
}
.arch-form-banner{background:rgba(255,199,60,.10);border:1px solid rgba(255,199,60,.35);border-radius:var(--radius-md);padding:10px 14px;color:var(--text-primary);font-size:13px;margin-bottom:18px;display:flex;align-items:center;gap:8px;position:relative;z-index:2}
.arch-form-banner i{color:var(--accent)}
.arch-form-banner--error{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.40);color:#f87171;align-items:flex-start}
.arch-form-banner--error i{color:#f87171}

/* themed file picker — applies to every <input type="file"> in the project */
input[type="file"]{background:var(--bg-surface)!important;color:var(--text-secondary)!important;border:1px solid var(--border-hover)!important;border-radius:var(--radius-sm)!important;padding:6px 10px;font-size:13px;cursor:pointer}
input[type="file"]::file-selector-button{background:var(--bg-card)!important;color:var(--text-secondary)!important;border:1px solid var(--border-hover)!important;border-radius:var(--radius-sm)!important;padding:6px 14px;margin:0 12px 0 0;font-weight:600;font-size:12px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
input[type="file"]::file-selector-button:hover{background:var(--accent-dim)!important;color:var(--accent)!important;border-color:var(--accent)!important}
[dir="rtl"] input[type="file"]::file-selector-button{margin:0 0 0 12px}

/* file-picker preview tray — populated by static/javascript/file-preview.js */
.file-preview-tray{display:none;flex-wrap:wrap;gap:10px;margin:10px 0 4px;padding:0}
.file-preview-tile{position:relative;display:flex;flex-direction:column;width:96px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:border-color .15s,transform .15s}
.file-preview-tile:hover{border-color:var(--accent);transform:translateY(-1px)}
.file-preview-thumb{position:relative;width:100%;height:72px;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);overflow:hidden}
.file-preview-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.file-preview-badge{font-size:13px;font-weight:700;color:#fff;letter-spacing:.04em;padding:4px 10px;border-radius:var(--radius-sm);text-transform:uppercase;font-family:'Poppins',system-ui,sans-serif;background:#475569}
/* Per-extension solid colours — same palette JS uses inline for the
 * staged tray, available here for server-rendered tiles (existing
 * project attachments) so they don't need inline styles. */
.file-preview-badge[data-ext="pdf"]{background:#ef4444}
.file-preview-badge[data-ext="doc"],.file-preview-badge[data-ext="docx"],.file-preview-badge[data-ext="rtf"],.file-preview-badge[data-ext="odt"]{background:#2563eb}
.file-preview-badge[data-ext="txt"]{background:#64748b}
.file-preview-badge[data-ext="xls"],.file-preview-badge[data-ext="xlsx"],.file-preview-badge[data-ext="csv"],.file-preview-badge[data-ext="ods"]{background:#16a34a}
.file-preview-badge[data-ext="ppt"],.file-preview-badge[data-ext="pptx"],.file-preview-badge[data-ext="odp"]{background:#f97316}
.file-preview-badge[data-ext="dwg"],.file-preview-badge[data-ext="dxf"],.file-preview-badge[data-ext="rvt"],.file-preview-badge[data-ext="rfa"]{background:#eab308}
.file-preview-badge[data-ext="zip"],.file-preview-badge[data-ext="rar"],.file-preview-badge[data-ext="7z"]{background:#7c3aed}
.file-preview-badge[data-ext="mp4"],.file-preview-badge[data-ext="mov"],.file-preview-badge[data-ext="webm"],.file-preview-badge[data-ext="mkv"]{background:#a855f7}
.file-preview-badge[data-ext="mp3"],.file-preview-badge[data-ext="wav"],.file-preview-badge[data-ext="ogg"],.file-preview-badge[data-ext="m4a"]{background:#06b6d4}
.file-preview-badge[data-ext="glb"],.file-preview-badge[data-ext="gltf"],.file-preview-badge[data-ext="obj"],.file-preview-badge[data-ext="stl"],.file-preview-badge[data-ext="fbx"],.file-preview-badge[data-ext="dae"]{background:#0d9488}
.file-preview-meta{padding:6px 8px 8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.file-preview-name{font-size:11px;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-preview-size{font-size:10px;color:var(--text-muted)}
.file-preview-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.65);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .15s}
.file-preview-remove:hover{background:var(--danger);transform:scale(1.08)}
[dir="rtl"] .file-preview-remove{right:auto;left:4px}

/* tag-chip input — populated by static/javascript/tag-chip-input.js
   Mirrors the .search-type-chip palette so confirmed tags read like the
   filter pills on the search page. */
.tag-chip-host{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--bg-surface);border:1px solid var(--border-hover);border-radius:var(--radius-sm);padding:6px 8px;min-height:42px;cursor:text;position:relative}
.tag-chip-host:focus-within{border-color:rgba(255,199,60,.55);box-shadow:0 0 0 3px rgba(255,199,60,.10)}
.tag-chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-dim);border:1px solid rgba(255,199,60,.55);color:var(--accent);font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;user-select:none;line-height:1.2;box-shadow:0 2px 10px rgba(255,199,60,.10)}
.tag-chip-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:none;background:transparent;color:var(--accent);font-size:13px;line-height:1;padding:0;cursor:pointer;opacity:.7;transition:opacity .12s,background .12s}
.tag-chip-x:hover{opacity:1;background:rgba(255,199,60,.18)}
.tag-chip-entry{flex:1;min-width:120px;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:13px;padding:4px 6px}
.tag-chip-entry::placeholder{color:var(--text-muted)}
.tag-chip-suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border-hover);border-radius:var(--radius-sm);max-height:220px;overflow-y:auto;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.35);display:none}
.tag-chip-suggest.is-open{display:block}
.tag-chip-suggest-item{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:13px;color:var(--text-primary);cursor:pointer;border-bottom:1px solid var(--border)}
.tag-chip-suggest-item:last-child{border-bottom:none}
.tag-chip-suggest-item:hover,.tag-chip-suggest-item.is-active{background:var(--accent-dim);color:var(--accent)}
.tag-chip-suggest-item .tag-chip-suggest-hash{color:var(--text-muted);font-weight:600}
.tag-chip-suggest-item.is-active .tag-chip-suggest-hash{color:var(--accent)}
.tag-chip-suggest-empty{padding:8px 12px;font-size:12px;color:var(--text-muted)}

/* offices detail page (.office-p-*, .office-portfolio*, .wf-*) moved to
 * static/css/offices.css in Step 5 of the offices roadmap. */

/* loading states & skeletons (#43) */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.btn-loading{position:relative;color:transparent!important;pointer-events:none;opacity:.85}
.btn-loading>*{visibility:hidden}
.btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid var(--accent);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.skeleton{background:linear-gradient(90deg,var(--bg-card) 0,var(--bg-surface) 50%,var(--bg-card) 100%);background-size:800px 100%;animation:shimmer 1.4s linear infinite;border-radius:8px}
.skel-line{height:10px;margin:6px 0;border-radius:6px}
.skel-line.lg{height:14px}
.skel-bubble{display:flex;gap:8px;align-items:flex-end;margin:6px 0}
.skel-bubble .skel-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.skel-bubble .skel-body{flex:0 0 60%;padding:10px 14px;border-radius:14px;height:38px}
.skel-bubble.skel-mine{flex-direction:row-reverse}
.skel-pending{opacity:.55}
.skel-pending::after{content:'';display:inline-block;width:10px;height:10px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px}
/* search filters bar (#47) */
.search-filters{
  background:var(--bg-card);
  border:1px solid var(--border-hover);border-radius:var(--radius-lg);padding:16px 18px;
  /* Park this card at z-index:0 so the navbar popovers (bell + envelope,
   * z-index:1080 inside the navbar's z-index:1100 context) always paint
   * over it. */
  position:relative;z-index:0;
}
.search-filters input,.search-filters select{outline:none}

/* in-card search bar at the very top of the filter card */
.search-filter-search-row{position:relative;margin-bottom:14px}
.search-filter-search{
  width:100%;height:42px;padding:0 14px 0 40px;font-size:14px;font-weight:500;
  background:var(--bg-surface)!important;color:var(--text-primary)!important;
  border:1px solid var(--border-hover)!important;border-radius:var(--radius-md)!important;
  transition:border-color .15s,box-shadow .15s
}
.search-filter-search::placeholder{color:var(--text-muted)}
.search-filter-search:focus{border-color:rgba(255,199,60,.55)!important;box-shadow:0 0 0 3px rgba(255,199,60,.10)!important}
.search-filter-search-icon{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:transparent;border:none;color:var(--text-muted);font-size:14px;
  cursor:pointer;transition:background .15s,color .15s;padding:0
}
.search-filter-search-icon:hover{background:var(--accent-dim);color:var(--accent)}
.search-filter-search-icon:focus-visible{outline:none;background:var(--accent-dim);color:var(--accent);box-shadow:0 0 0 2px rgba(255,199,60,.35)}
[dir="rtl"] .search-filter-search{padding:0 40px 0 14px}
[dir="rtl"] .search-filter-search-icon{left:auto;right:6px}

.search-filters-row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end}
.search-filter-group{display:flex;flex-direction:column;min-width:160px}
.search-filter-group.search-filter-types{flex:1;min-width:280px}
.search-filter-label{font-size:11px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.search-filter-input{background:var(--bg-surface);border:1px solid var(--border-hover);border-radius:var(--radius-sm);color:var(--text-primary);padding:7px 10px;font-size:13px;height:34px}
.search-filter-input:focus{border-color:rgba(255,199,60,.45);outline:none;box-shadow:0 0 0 3px rgba(255,199,60,.08)}
.search-type-row{display:flex;flex-wrap:wrap;gap:6px}
.search-type-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-surface);border:1px solid var(--border-hover);color:var(--text-secondary);font-size:12px;font-weight:500;padding:6px 12px;border-radius:99px;cursor:pointer;transition:all .15s;user-select:none;position:relative}
.search-type-chip input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.search-type-chip:hover{border-color:rgba(255,199,60,.35);color:var(--text-primary)}
.search-type-chip.is-on{background:var(--accent-dim);border-color:rgba(255,199,60,.55);color:var(--accent);box-shadow:0 2px 10px rgba(255,199,60,.10)}
.search-type-chip.is-on::before{content:"\2713";font-weight:700;font-size:11px;line-height:1}
.search-filter-actions{display:flex;gap:8px;align-items:center}

/* Posts filter bar — categories + sort + friends + CTA on a single wrapping row */
/* Posts filter bar — frosted-glass card matching .modal-content: gold-tinted
 * gradient, soft border-hover edge, top-centre halo, and a real backdrop
 * blur so the page mesh shows through. */
.posts-filter-bar{
  position:relative;
  /* z-index:10 ensures dropdown panels (z-index:50 within this context)
   * clear job/post cards that follow in DOM order, while staying well
   * below the navbar at z:1100. */
  z-index:10;
  padding:12px 14px;
  background:var(--bg-card);
  border:1px solid var(--border-hover);
  border-radius:var(--radius-lg);
}
.posts-filter-bar::before{content:none}
.posts-filter-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;row-gap:10px}

/* Posts page outer wrapper — form flex:1, Topics card pinned to the right */
.posts-topbar{display:flex;align-items:flex-start;gap:10px}
.posts-topbar .app-toolbar-form{flex:1;min-width:0;margin-bottom:0}
.posts-topics-wrap{display:flex;align-items:center;flex-shrink:0}
@media(max-width:640px){
  .posts-topbar{flex-direction:column;align-items:stretch}
  .posts-topics-wrap{align-self:stretch}
  .posts-filter-topics{width:100%;justify-content:center}
  .app-toolbar-cta{width:100%;margin-inline-start:0;justify-content:center}
}

/* Topics pill — discovery entry point beside the filter form */
.posts-filter-topics{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 18px;border-radius:var(--radius-sm);
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.30);
  color:#7dd3fc;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease);
}
.posts-filter-topics i{font-size:11px;line-height:1}
.posts-filter-topics:hover{background:rgba(56,189,248,.22);color:#bae6fd;border-color:rgba(56,189,248,.55);transform:translateY(-1px)}
.posts-filter-categories{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.posts-filter-categories .search-type-chip{padding:5px 11px;font-size:12px;height:32px}
.posts-filter-sort .search-filter-input{height:32px;padding:4px 10px;font-size:12px;min-width:150px}
.posts-filter-friends{padding:5px 11px;font-size:12px;height:32px}
.posts-filter-friends i{font-size:11px}

/* Clear-filters chip — only renders when at least one filter is active. */
.posts-filter-clear{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;height:32px;font-size:12px;font-weight:500;
  color:var(--text-secondary);text-decoration:none;
  background:var(--overlay-soft);border:1px solid var(--border);
  border-radius:99px;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.posts-filter-clear:hover{background:var(--accent-dim);color:var(--accent);border-color:rgba(205,161,44,.30)}
.posts-filter-clear i{font-size:11px}

/* Tiny muted vertical separators between filter groups */
.posts-filter-sep{
  display:inline-block;width:1px;height:20px;
  background:var(--border-hover);
  flex-shrink:0;
  align-self:center;
  opacity:.6;
}

/* Generic primary CTA — softly rounded, gentle accent glow.
 * Used for Make-a-post and every "create" action across the site (Add
 * project, Post a job, Create group, Add office, etc.). Slight glow on
 * rest, lifts to a stronger glow on hover. Border is accent-toned so the
 * chip reads as primary without a heavy fill. The legacy
 * .posts-make-cta selector is kept as an alias. */
.arch-cta,.posts-make-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 18px;border-radius:var(--radius-sm);
  background:var(--accent-dim);
  color:var(--accent)!important;
  font-weight:600;font-size:13px;letter-spacing:.02em;
  text-decoration:none;
  border:1px solid rgba(205,161,44,.45);
  box-shadow:0 0 0 0 rgba(205,161,44,.0),0 1px 6px rgba(205,161,44,.18);
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease);
  white-space:nowrap;
}
.arch-cta i,.posts-make-cta i{font-size:11px;line-height:1}
.arch-cta:hover,.posts-make-cta:hover{
  background:var(--accent);
  color:#1a1a1a!important;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(205,161,44,.14),0 4px 12px rgba(205,161,44,.32);
  transform:translateY(-1px);
}
.arch-cta:active,.posts-make-cta:active{transform:translateY(0);box-shadow:0 1px 6px rgba(205,161,44,.22)}
[data-theme="light"] .arch-cta,[data-theme="light"] .posts-make-cta{box-shadow:0 0 0 0 rgba(184,134,42,.0),0 1px 6px rgba(184,134,42,.18)}
[data-theme="light"] .arch-cta:hover,[data-theme="light"] .posts-make-cta:hover{color:#fff!important;box-shadow:0 0 0 3px rgba(184,134,42,.14),0 4px 12px rgba(184,134,42,.32)}

@media (max-width:640px){
  .posts-filter-sep{display:none}
  .arch-cta,.posts-make-cta{margin-inline-start:0!important;flex:1 0 100%;justify-content:center}
  .posts-filter-row{gap:8px}
}

/* themed empty state — used by the general search page */
.search-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 24px 64px;background:transparent;border:1px dashed var(--border-hover);border-radius:var(--radius-lg);margin:8px 0}
.search-empty-glyph{filter:drop-shadow(0 8px 28px rgba(255,199,60,.18));margin-bottom:18px}
.search-empty-title{font-size:17px;font-weight:700;color:var(--text-primary);margin:0 0 6px;letter-spacing:.01em}
.search-empty-body{font-size:13px;color:var(--text-muted);margin:0 auto;max-width:440px;line-height:1.65}
.search-filters input:focus,.search-filters select:focus{border-color:var(--accent)!important}

/* empty-state primitive (#44) — same gold halo as the search empty state */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:48px 24px;
  background:var(--bg-card);
  border:1px dashed var(--border-hover);border-radius:16px;margin:8px 0
}
.empty-state.compact{padding:32px 20px}
.empty-state.inline{background:transparent;border:none;padding:28px 16px}
.empty-state-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--accent-dim);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  color:var(--accent);font-size:26px;
  box-shadow:0 0 0 1px rgba(255,199,60,.18), 0 8px 28px rgba(255,199,60,.10)
}
.empty-state.compact .empty-state-icon{width:52px;height:52px;font-size:22px;margin-bottom:14px}
.empty-state-title{font-size:15px;font-weight:700;color:var(--text-primary);margin:0 0 6px;letter-spacing:.01em}
.empty-state-body{font-size:13px;color:var(--text-muted);margin:0 0 16px;max-width:380px;line-height:1.6}
.empty-state-cta{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.empty-state-cta .btn{font-size:13px;padding:7px 18px}

/* first-content nudge banner — shown on /posts/ /projects/ /jobs/ when user has 0 items */
.first-content-nudge{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(205,161,44,.08) 0%,transparent 100%);
  border:1px solid rgba(205,161,44,.28);
  border-radius:var(--radius-md);
  padding:16px 20px;
}
.fcn-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:rgba(205,161,44,.14);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--accent);
}
.fcn-body{flex:1;min-width:180px}
.fcn-title{font-size:14px;font-weight:700;color:var(--text-primary);margin:0 0 3px}
.fcn-desc{font-size:12.5px;color:var(--text-muted);margin:0;line-height:1.5}
.fcn-cta{flex-shrink:0;white-space:nowrap;font-size:13px;padding:7px 18px}

/* bootstrap overrides */
.form-control,.form-select{background-color:var(--bg-surface)!important;color:var(--text-primary)!important;border:1px solid var(--border-hover)!important;border-radius:var(--radius-sm)!important}
.form-control::placeholder{color:var(--text-muted)!important}

/* Bootstrap renders crispy help_text as <small class="form-text text-muted">.
 * Bootstrap's default colours barely register on dark surfaces — re-tint to
 * our AA-checked --text-muted so descriptions and instructions are readable. */
.form-text,
.form-text.text-muted,
small.form-text,
small.text-muted,
.text-muted{
  color:var(--text-muted)!important;
}
.form-text{
  font-size:12px;
  line-height:1.5;
  margin-top:4px;
}
/* Section-level hint sat under a .settings-section-label (or any
 * "sub-line under a section header"). Promoted from inline settings
 * styles to global so users_management, my-activity pages, etc. all
 * read the same. Matches .form-text in size + line-height. */
.settings-section-hint{
  color:var(--text-muted);
  font-size:12px;
  line-height:1.5;
  margin:-6px 0 14px;
}
.form-label{color:var(--text-secondary);font-size:13px;font-weight:500}
label.form-check-label{color:var(--text-secondary);font-size:13.5px}
/* Crispy form errors */
.invalid-feedback,
.errorlist li{color:var(--danger)!important;font-size:12px;font-weight:500}
.form-control:focus,.form-select:focus{background-color:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:rgba(255,199,60,.40)!important;box-shadow:none!important}
.btn{border-radius:var(--radius-sm)!important}
.card{background-color:var(--bg-card)!important;border:1px solid var(--border)!important}
.navbar-toggler{border-color:var(--border-hover)!important}
.navbar-toggler-icon{filter:invert(1)}

/* ── arch-modal form controls — semi-transparent so the modal gradient
 * shows through instead of being covered by the global bg-surface blocks. */
.arch-modal form{background:none!important}
.arch-modal .form-control,
.arch-modal .form-select,
.arch-modal select,
.arch-modal textarea{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  color:var(--text-primary)!important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color .15s,background .15s,box-shadow .18s;
}
.arch-modal .form-control:focus,
.arch-modal .form-select:focus,
.arch-modal select:focus,
.arch-modal textarea:focus{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(205,161,44,.50)!important;
  box-shadow:0 0 0 3px rgba(205,161,44,.14),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.arch-modal .form-control::placeholder,
.arch-modal textarea::placeholder{color:var(--text-muted)!important}
[data-theme="light"] .arch-modal .form-control,
[data-theme="light"] .arch-modal .form-select,
[data-theme="light"] .arch-modal select,
[data-theme="light"] .arch-modal textarea{
  background:rgba(255,255,255,.55)!important;
  border:1px solid rgba(0,0,0,.12)!important;
}
[data-theme="light"] .arch-modal .form-control:focus,
[data-theme="light"] .arch-modal .form-select:focus,
[data-theme="light"] .arch-modal select:focus,
[data-theme="light"] .arch-modal textarea:focus{
  background:rgba(255,255,255,.80)!important;
  border-color:rgba(184,134,42,.50)!important;
  box-shadow:0 0 0 3px rgba(184,134,42,.14)!important;
}
/* Strip .arch-form-shell's own card shell when embedded inside a modal —
 * avoids a opaque box-within-a-box double border effect. */
.arch-modal .arch-form-shell{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  padding-inline:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* Any .card rendered by crispy/Bootstrap inside a modal should also be
 * transparent so it doesn't punch a hole in the gradient. */
.arch-modal .card{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}

/* ── Select2 theming ───────────────────────────────────────
 * Applies to every Select2 instance loaded with the "default" theme
 * (default for the CDN build). Surfaces match our card palette and the
 * search input inside the dropdown reads as a continuation of the field
 * itself. Used by listing-page filters (country, category) and the
 * add-project office picker. */
.select2-container--default .select2-selection--single{
  background:var(--bg-surface)!important;
  border:1px solid var(--border-hover)!important;
  border-radius:var(--radius-sm)!important;
  height:32px!important;display:flex;align-items:center;
  font-size:12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--text-primary)!important;padding-left:10px!important;line-height:30px!important
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--text-muted)!important}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:30px!important}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--text-muted) transparent transparent transparent!important}
.select2-container--default .select2-selection--single:hover{border-color:var(--accent)!important}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(205,161,44,.10)
}
.select2-dropdown{
  background:var(--bg-card)!important;
  border:1px solid var(--border-hover)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.select2-container--default .select2-search--dropdown{padding:6px}
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:var(--bg-surface)!important;
  border:1px solid var(--border-hover)!important;
  color:var(--text-primary)!important;
  border-radius:var(--radius-sm)!important;
  padding:6px 10px!important;font-size:13px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus{
  border-color:var(--accent)!important;outline:none;
}
.select2-results__option{color:var(--text-primary)!important;padding:7px 12px!important;font-size:13px}
/* Highlighted (keyboard- or hover-focused) and currently-selected
 * options keep the gold-dim wash as a state cue, but text stays in
 * --text-primary so the label reads cleanly. The thin gold left
 * border carries the colour signal without staining the text. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted{
  background:var(--accent-dim)!important;
  color:var(--text-primary)!important;
  box-shadow:inset 3px 0 0 var(--accent);
}
.select2-container--default .select2-results__option[aria-selected=true]{
  background:rgba(205,161,44,.14)!important;
  color:var(--text-primary)!important;
  box-shadow:inset 3px 0 0 var(--accent);
  font-weight:600;
}
.select2-container--default .select2-results__option[role=group]{padding:0}
.select2-container--default .select2-selection--single .select2-selection__clear{color:var(--text-muted)!important;margin-right:8px}

/* ── Saved-tab reading-list chips ────────────────────────────────────
 * Sits at the top of the profile Saved tab. Each collection is a chip
 * with a folder icon + name + post count; clicking opens the
 * collection's view page. The "Manage" link to the right deep-links
 * into the dedicated /posts/bookmarks/ editor. */
.saved-collection-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:99px;
  background:var(--accent-dim);color:var(--accent);
  border:1px solid rgba(205,161,44,.30);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.saved-collection-chip i{font-size:11px}
.saved-collection-chip:hover{background:var(--accent);color:#1a1a1a;border-color:var(--accent);transform:translateY(-1px)}
.saved-collection-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 6px;
  border-radius:99px;background:rgba(0,0,0,.20);color:inherit;
  font-size:10.5px;font-weight:700;letter-spacing:0;
}
.saved-collections-manage:hover{color:var(--text-primary)!important}

/* ── Custom checkbox dropdown — .cat-dd ─────────────────────────────────
 * Used by the post category filter (#post-category-dropdown). Closed
 * state visually matches a regular <select> (.search-filter-input) so
 * the row of filters reads as one family. Open state shows a panel of
 * real <input type="checkbox"> options with our own checkbox visual.
 * The widget is fully self-contained — no Select2, no jQuery. */
.cat-dd{position:relative;display:inline-block;z-index:5}
.cat-dd:has(.cat-dd-button[aria-expanded="true"]){z-index:60}
.cat-dd-button{
  display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;height:32px;padding:4px 10px;font-size:12px;
  background:var(--bg-surface);border:1px solid var(--border-hover);
  border-radius:var(--radius-sm);color:var(--text-primary);
  cursor:pointer;text-align:start;min-width:160px;
  transition:border-color .15s,box-shadow .25s var(--ease);
}
.cat-dd-button:hover{border-color:rgba(255,199,60,.45)}
.cat-dd[data-open="true"] .cat-dd-button,
.cat-dd-button[aria-expanded="true"]{
  border-color:rgba(255,199,60,.45);box-shadow:0 0 0 3px rgba(255,199,60,.08);
}
.cat-dd-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cat-dd-caret{font-size:10px;color:var(--text-muted);transition:transform .15s var(--ease)}
.cat-dd-button[aria-expanded="true"] .cat-dd-caret{transform:rotate(180deg);color:var(--accent)}

.cat-dd-panel{
  position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:60;
  min-width:max(180px,100%);max-height:280px;overflow-y:auto;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:0 10px 30px rgba(0,0,0,.32),0 0 0 1px rgba(205,161,44,.10);
  padding:4px;
}
.cat-dd-panel[hidden]{display:none}
.cat-dd-option{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:var(--radius-sm);
  cursor:pointer;font-size:13px;color:var(--text-primary);
  user-select:none;transition:background .12s;
}
.cat-dd-option:hover{background:var(--overlay-soft)}
.cat-dd-option input{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
}
/* Faux checkbox — the visible square. Flips to filled-gold via the
 * sibling :checked input on the hidden <input>. */
.cat-dd-check{
  width:14px;height:14px;flex-shrink:0;border-radius:3px;
  border:1px solid var(--border-hover);background:var(--bg-surface);
  position:relative;transition:background .12s,border-color .12s;
}
.cat-dd-option:hover .cat-dd-check{border-color:var(--accent)}
.cat-dd-option input:checked + .cat-dd-check{background:var(--accent);border-color:var(--accent)}
.cat-dd-option input:checked + .cat-dd-check::after{
  content:"";position:absolute;left:3px;top:0;
  width:4px;height:8px;border:solid #1a1a1a;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.cat-dd-option input:focus-visible + .cat-dd-check{outline:2px solid var(--accent);outline-offset:2px}
.cat-dd-text{flex:1;min-width:0}

/* ── Multi-select Select2 styling ──────────────────────────────────────
 * Reused by the post category filter (and any future multi-select
 * filter). Selected chips inside the search box look like the rest of
 * the chip system; the dropdown options each carry a faux checkbox
 * (.ms-cb-box) that fills in via CSS when the option is selected. */
.select2-container--default .select2-selection--multiple{
  background:var(--bg-surface)!important;border:1px solid var(--border)!important;
  border-radius:99px!important;min-height:32px!important;
  padding:1px 6px!important;line-height:1!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered{
  padding:0 4px!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:4px!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:var(--accent-dim)!important;color:var(--accent)!important;
  border:1px solid rgba(205,161,44,.30)!important;border-radius:99px!important;
  padding:1px 9px 1px 6px!important;font-size:11px!important;font-weight:600!important;
  letter-spacing:.02em!important;margin:1px 0!important;line-height:1.4!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color:var(--accent)!important;margin-right:5px!important;font-weight:700!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
  color:var(--danger)!important;background:transparent!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder{
  color:var(--text-muted)!important;padding:0 4px!important;font-size:12px!important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple{
  border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(205,161,44,.10)!important;
}

/* Faux-checkbox row used by the templateResult callback. The .ms-cb-box
 * span flips to the "checked" look via [aria-selected="true"] so the
 * checkbox state mirrors Select2's internal model without us managing a
 * real <input>. Disabling Select2's own selected-row tint here so the
 * row reads as a checkbox list, not as a highlighted-row list. */
.select2-results__option:has(.ms-cb-row),
.select2-container--default .select2-results__option[aria-selected=true]:has(.ms-cb-row){
  background:transparent!important;color:var(--text-primary)!important;
}
.select2-container--default .select2-results__option--highlighted:has(.ms-cb-row){
  background:var(--overlay-soft)!important;color:var(--text-primary)!important;
}
.ms-cb-row{display:inline-flex;align-items:center;gap:9px}
.ms-cb-box{
  width:14px;height:14px;flex-shrink:0;border-radius:3px;
  border:1px solid var(--border-hover);background:var(--bg-card);
  position:relative;transition:background .12s,border-color .12s;
}
.select2-results__option[aria-selected=true] .ms-cb-box{
  background:var(--accent);border-color:var(--accent);
}
.select2-results__option[aria-selected=true] .ms-cb-box::after{
  content:"";position:absolute;left:3px;top:0px;
  width:4px;height:8px;border:solid #1a1a1a;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.select2-results__option--highlighted .ms-cb-box{border-color:var(--accent)}
.ms-cb-label{font-size:13px;color:inherit}

/* ── TinyMCE chrome theming ─────────────────────────────────
 * The editable area is themed via content_style in settings.py; these
 * rules theme the surrounding chrome (toolbar/menubar/statusbar/dialogs)
 * so it sits flush in our cards instead of looking like a transplant
 * from another product. */
.tox.tox-tinymce{
  border:1px solid var(--border-hover)!important;
  border-radius:var(--radius-sm)!important;
  background:var(--bg-card);
  overflow:hidden;
  box-shadow:none;
}
.tox .tox-editor-header,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-menubar{background:var(--bg-card)!important;border-bottom:1px solid var(--border)!important}
.tox .tox-toolbar__group{border-color:var(--border)!important}
.tox .tox-tbtn,
.tox .tox-mbtn{color:var(--text-secondary)!important}
.tox .tox-tbtn svg,.tox .tox-mbtn svg{fill:var(--text-secondary)!important}
.tox .tox-tbtn:hover,.tox .tox-mbtn:hover{background:var(--accent-dim)!important;color:var(--accent)!important}
.tox .tox-tbtn:hover svg,.tox .tox-mbtn:hover svg{fill:var(--accent)!important}
.tox .tox-tbtn--enabled,.tox .tox-tbtn--enabled:hover{background:var(--accent-dim)!important;color:var(--accent)!important}
.tox .tox-tbtn--enabled svg{fill:var(--accent)!important}
.tox .tox-statusbar{background:var(--bg-card)!important;border-top:1px solid var(--border)!important;color:var(--text-muted)!important}
.tox .tox-statusbar a,.tox .tox-statusbar__path-item{color:var(--text-muted)!important}
.tox .tox-statusbar a:hover,.tox .tox-statusbar__path-item:hover{color:var(--accent)!important}
/* dropdown / menu surfaces */
.tox .tox-menu,.tox .tox-collection--list,.tox .tox-collection__group,.tox .tox-pop__dialog{
  background:var(--bg-card)!important;border:1px solid var(--border-hover)!important;
  border-radius:var(--radius-md)!important;box-shadow:var(--shadow-lg)!important;
}
.tox .tox-collection__item{color:var(--text-primary)!important}
.tox .tox-collection__item--active,.tox .tox-collection__item:hover{background:var(--accent-dim)!important;color:var(--accent)!important}
.tox .tox-collection__item-icon svg{fill:currentColor!important}
.tox .tox-split-button:hover{box-shadow:none!important}
/* dialog (link / image / source-code popups) */
.tox .tox-dialog{background:var(--bg-card)!important;border:1px solid var(--border-hover)!important;border-radius:var(--radius-md)!important}
.tox .tox-dialog__header,.tox .tox-dialog__footer{background:var(--bg-card)!important;border-color:var(--border)!important;color:var(--text-primary)!important}
.tox .tox-dialog__title{color:var(--text-primary)!important}
.tox .tox-dialog__body-content,.tox .tox-form,.tox .tox-form__group label,.tox .tox-label{color:var(--text-secondary)!important}
.tox .tox-textfield,.tox .tox-textarea,.tox .tox-listboxfield .tox-listbox--select,.tox .tox-selectfield select{
  background:var(--bg-surface)!important;color:var(--text-primary)!important;border:1px solid var(--border-hover)!important;
}
.tox .tox-textfield:focus,.tox .tox-textarea:focus{border-color:var(--accent)!important;box-shadow:none!important}
.tox .tox-button{background:var(--accent)!important;color:#1a1a1a!important;border:none!important}
.tox .tox-button:hover{background:var(--accent-hover)!important}
.tox .tox-button--secondary,.tox .tox-button--naked{background:transparent!important;color:var(--text-secondary)!important;border:1px solid var(--border-hover)!important}
.tox .tox-button--secondary:hover{color:var(--accent)!important;border-color:var(--accent)!important}
/* notification banners (e.g. "image is too large") */
.tox .tox-notification--warn,.tox .tox-notification--info{background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-hover)!important}

/* ── Themed dropdowns (project-wide) ──────────────────────────
 * Unifies <select>, .form-select, and Bootstrap .dropdown-menu so every
 * dropdown surface in the app reads the same: surface bg, soft border,
 * accent-dim hover, accent focus. Native <option> rendering is browser-
 * controlled in most engines, but Firefox + Chromium-on-Linux respect
 * option { background, color }, so we set those for the partial wins.
 *
 * The chevron is a hand-drawn SVG data-URI tinted to --text-muted; we
 * swap it for an accent variant on hover/focus. Light theme has its own
 * stroke colour because url() can't read CSS vars. */
select,.form-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a99af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:12px 8px!important;
  padding-right:34px!important;
  cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease);
}
[dir="rtl"] select,[dir="rtl"] .form-select{
  background-position:left 12px center!important;
  padding-right:12px!important;padding-left:34px!important;
}
[data-theme="light"] select,[data-theme="light"] .form-select{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235b6878' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
select:hover,.form-select:hover{border-color:var(--accent)!important}
select:hover,.form-select:hover{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23cda12c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
select:focus,.form-select:focus{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23cda12c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
select::-ms-expand{display:none}  /* legacy IE/Edge */
/* Native <option> — best-effort cross-browser theming */
option{background-color:var(--bg-card);color:var(--text-primary)}
option:checked,option:hover{background-color:var(--accent-dim);color:var(--accent)}

/* Bootstrap .dropdown-menu (used in group-member actions, etc.) */
.dropdown-menu{
  background-color:var(--bg-card)!important;
  border:1px solid var(--border-hover)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:var(--shadow-lg)!important;
  padding:6px!important;
  min-width:180px;
  --bs-dropdown-link-color:var(--text-primary);
  --bs-dropdown-link-hover-color:var(--accent);
  --bs-dropdown-link-hover-bg:var(--accent-dim);
  --bs-dropdown-link-active-color:var(--accent);
  --bs-dropdown-link-active-bg:var(--accent-dim);
}
.dropdown-menu .dropdown-item{
  color:var(--text-primary)!important;
  font-size:13px;
  padding:7px 12px!important;
  border-radius:var(--radius-sm)!important;
  transition:background .12s var(--ease),color .12s var(--ease);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background:var(--accent-dim)!important;
  color:var(--accent)!important;
}
.dropdown-menu .dropdown-item:active{background:var(--accent-dim)!important;color:var(--accent)!important}
.dropdown-menu .dropdown-divider{
  border-color:var(--border)!important;
  margin:4px 2px!important;
}
.dropdown-menu .dropdown-header{
  color:var(--text-muted)!important;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px 4px!important;
}

/* ════════════════════════════════════════════════════════════════
   ▎  Chat / messaging — v3 full-viewport redesign                 ▎
   ════════════════════════════════════════════════════════════════
   position:fixed shell immune to body scroll, so anchor clicks in
   the pinned strip never shift the layout. Clean dark aesthetic
   (no textures), distinct rail vs pane zones, clear bubble tails.
*/

/* Full-height page wrapper: fixed avoids body-scroll shift from
   anchor navigation (the root cause of the pinned-message jump). */
.arch-chat-page{
  position:fixed;
  top:60px;left:0;right:0;bottom:0;
  overflow:hidden;
  z-index:10;
}

/* ── Outer shell ── */
.arch-chat-shell{
  position:relative;
  display:grid;grid-template-columns:330px 1fr;
  height:100%;
  min-height:0;
  background:#0a1219;
  overflow:hidden;
  isolation:isolate;
}

/* ── Left rail ── */
.arch-chat-rail{
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
  background:#111826;
  min-height:0;overflow:hidden;
}
.arch-chat-rail-head{
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}
.arch-chat-rail-title{
  flex:1;margin:0;
  font-size:16px;font-weight:700;
  color:var(--text-primary);letter-spacing:-.01em;
}
.arch-chat-rail-title-count{
  font-size:11px;color:var(--text-muted);font-weight:500;margin-inline-start:6px;
}
/* New-chat action button in rail header */
.arch-chat-rail-action{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.10);background:transparent;
  color:var(--text-muted);cursor:pointer;text-decoration:none;
  font-size:14px;flex-shrink:0;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.arch-chat-rail-action:hover{
  border-color:rgba(205,161,44,.45);color:var(--accent);background:var(--accent-dim);
}
/* Section labels (Studio inbox / Personal) */
/* ── Starred messages rail link (Step 69) ── */
.arch-chat-starred-link{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.55);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .15s,background .15s;
}
.arch-chat-starred-link:hover,.arch-chat-starred-link.is-active{
  color:#f59e0b;background:rgba(245,158,11,.08);
}
.arch-chat-starred-link i{font-size:12px}

/* ── All / Unread tabs ── */
.arch-chat-tabs{
  display:flex;gap:2px;
  padding:6px 10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.arch-chat-tab{
  flex:1;
  padding:6px 4px;
  border:none;border-radius:6px 6px 0 0;
  background:transparent;
  color:rgba(255,255,255,.45);
  font-size:12.5px;font-weight:600;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:color .15s,background .15s;
}
.arch-chat-tab:hover{color:rgba(255,255,255,.75);background:rgba(255,255,255,.05)}
.arch-chat-tab.is-active{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-bottom:2px solid var(--accent);
}
.arch-chat-tab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;
  background:var(--accent);color:#1a1408;
  font-size:10.5px;font-weight:700;
  line-height:1;
}

/* ── Starred pane (Step 69) ── */
.arch-starred-pane{padding:0;display:flex;flex-direction:column}
.arch-starred-head{
  display:flex;align-items:center;gap:10px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--border);
  font-size:15px;font-weight:700;color:var(--text-primary);
}
.arch-starred-head i{color:#f59e0b}
.arch-starred-count{
  margin-left:auto;
  font-size:11px;font-weight:600;color:var(--text-muted);
  background:var(--bg-sidebar);
  padding:2px 8px;border-radius:99px;
}
.arch-starred-list{overflow-y:auto;flex:1}
.arch-starred-item{
  display:block;padding:14px 20px;
  border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;
  transition:background .12s;
}
.arch-starred-item:hover{background:var(--bg-card)}
.arch-starred-item-meta{
  display:flex;align-items:center;gap:10px;
  margin-bottom:6px;
}
.arch-starred-item-avatar{
  width:32px;height:32px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
}
.arch-starred-item-info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:1px;
}
.arch-starred-item-sender{
  font-size:13px;font-weight:600;color:var(--text-primary);
}
.arch-starred-item-conv{
  font-size:11px;color:var(--text-muted);
}
.arch-starred-item-conv i{font-size:10px}
.arch-starred-item-time{
  font-size:11px;color:var(--text-muted);white-space:nowrap;
}
.arch-starred-item-body{
  font-size:13px;color:var(--text-secondary);
  line-height:1.45;margin:0 0 4px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.arch-starred-item-att{
  font-size:11px;color:var(--text-muted);
}
.arch-starred-item-att i{font-size:10px}

.arch-chat-section-label{
  padding:10px 10px 4px;
  font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.28);
  display:flex;align-items:center;gap:6px;
  border-top:1px solid rgba(255,255,255,.06);margin-top:8px;
}
.arch-chat-section-label.is-first{border-top:none;margin-top:0;padding-top:6px}
.arch-chat-section-label.is-accent{color:var(--accent)}
.arch-chat-section-label i{font-size:11px}
.arch-chat-section-count{color:var(--text-muted);font-weight:600;margin-inline-start:2px}
.arch-chat-search{
  position:relative;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.arch-chat-search i{
  position:absolute;inset-inline-start:22px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:12px;pointer-events:none;
}
.arch-chat-search input{
  width:100%;height:38px;padding:0 12px 0 36px;
  background:#0e1a2a;border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  color:var(--text-primary);font-size:13px;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
[dir="rtl"] .arch-chat-search input{padding:0 36px 0 12px}
.arch-chat-search input::placeholder{color:var(--text-muted)}
.arch-chat-search input:focus{
  outline:none;border-color:rgba(205,161,44,.40);
  background:#0b1525;
}

/* Global inbox search — spinner + results panel */
.arch-chat-search-spinner{
  position:absolute;inset-inline-end:22px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;
  border:2px solid rgba(205,161,44,.25);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.arch-chat-global-results{
  flex:1;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:1px;
  scrollbar-width:thin;scrollbar-color:rgba(205,161,44,.25) transparent;
}
.arch-chat-global-results[hidden]{display:none}
.arch-global-results-note{
  font-size:11px;color:var(--text-muted);padding:4px 6px 2px;margin:0;
}
.arch-global-no-results{
  font-size:13px;color:var(--text-muted);padding:18px 12px;text-align:center;margin:0;
}
.arch-global-result{text-decoration:none}
.arch-global-snippet mark{
  background:rgba(205,161,44,.22);color:var(--text-primary);
  border-radius:2px;padding:0 1px;font-style:normal;
}
.arch-global-you{color:var(--text-muted);font-size:11.5px}
.arch-global-group-icon{
  width:38px;height:38px;border-radius:50%;
  background:rgba(205,161,44,.12);border:1px solid rgba(205,161,44,.20);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:13px;
}

.arch-chat-conv-list{
  flex:1;overflow-y:auto;
  padding:6px 8px;display:flex;flex-direction:column;gap:1px;
  scrollbar-width:thin;scrollbar-color:rgba(205,161,44,.25) transparent;
}
.arch-chat-conv-list::-webkit-scrollbar{width:5px}
.arch-chat-conv-list::-webkit-scrollbar-thumb{
  background:rgba(205,161,44,.25);border-radius:99px;
  border:1px solid transparent;background-clip:padding-box;
}
.arch-chat-conv-list::-webkit-scrollbar-thumb:hover{
  background:rgba(205,161,44,.5);background-clip:padding-box;
}
.arch-chat-conv{
  display:flex;align-items:center;gap:12px;
  padding:10px 10px;border-radius:10px;
  text-decoration:none;color:inherit;
  position:relative;
  transition:background var(--dur-fast) var(--ease);
  border:1px solid transparent;
}
.arch-chat-conv:hover{background:rgba(255,255,255,.04)}
.arch-chat-conv.is-active{
  background:rgba(205,161,44,.10);
  border-color:rgba(205,161,44,.22);
}
.arch-chat-conv.is-active .arch-chat-conv-name{color:var(--accent)}
.arch-chat-conv-avatar{
  flex-shrink:0;width:48px;height:48px;border-radius:50%;
  position:relative;overflow:hidden;
  background:var(--bg-deep);
}
.arch-chat-conv-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.arch-chat-conv-avatar .arch-chat-conv-dot{
  position:absolute;right:1px;bottom:1px;
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  border:2px solid #111826;
  box-shadow:0 0 0 1px rgba(205,161,44,.30);
}
.arch-chat-conv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.arch-chat-conv-line{display:flex;align-items:center;gap:4px}
.arch-chat-conv-name{
  flex:1;font-size:14px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.arch-chat-conv.is-unread .arch-chat-conv-name{color:var(--accent)}
.arch-chat-conv-time{font-size:11px;color:var(--text-muted);flex-shrink:0;font-weight:500}
.arch-chat-conv.is-unread .arch-chat-conv-time{color:var(--accent);font-weight:600}
.arch-chat-conv-snippet{
  font-size:12.5px;color:var(--text-muted);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}
.arch-chat-conv.is-unread .arch-chat-conv-snippet{color:var(--text-secondary);font-weight:500}
.arch-chat-conv-badge{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:var(--accent);color:#0c1219;
  border-radius:99px;font-size:11px;font-weight:700;line-height:1;
}

/* ── Right pane ── */
.arch-chat-pane{
  display:flex;flex-direction:column;
  background:#0a1219;
  position:relative;
  isolation:isolate;
  min-height:0;overflow:hidden;
}
/* Ambient top-glow on the pane — removed decorative haze */
.arch-chat-pane::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:transparent;
}
.arch-chat-pane > *{position:relative;z-index:1}

.arch-chat-pane-head{
  display:flex;align-items:center;gap:14px;
  padding:13px 20px;
  background:rgba(14,22,38,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  z-index:2;
}
.arch-chat-pane-avatar{
  width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(255,255,255,.08);
  overflow:hidden;flex-shrink:0;
}
.arch-chat-pane-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.arch-chat-pane-meta{flex:1;min-width:0}
.arch-chat-pane-meta a{text-decoration:none}
.arch-chat-pane-name{
  display:block;font-size:15px;font-weight:700;color:var(--text-primary);
  letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arch-chat-pane-name:hover{color:var(--accent)}
.arch-chat-pane-sub{
  display:block;font-size:12px;color:var(--text-muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arch-presence{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:3px;
  font-size:11.5px;color:var(--text-muted);
  font-weight:500;
}
.arch-presence-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--text-muted);
  transition:background var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease);
}
.arch-presence.is-online{color:#7bd28b}
.arch-presence.is-online .arch-presence-dot{
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:arch-presence-pulse 2.4s ease-out infinite;
}
@keyframes arch-presence-pulse{
  0%   {box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  60%  {box-shadow:0 0 0 5px rgba(34,197,94,0)}
  100% {box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

.arch-typing{
  margin:4px 24px 0;
  padding:5px 14px;
  font-size:12px;color:var(--accent);font-weight:500;
  background:rgba(205,161,44,.07);
  border:1px solid rgba(205,161,44,.18);
  border-radius:99px;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  width:fit-content;
  animation:arch-bubble-in var(--dur-med) var(--ease);
}
.arch-typing[hidden]{display:none}
.arch-typing::before{
  content:"";
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--accent);
  animation:arch-typing-blink 1.2s ease-in-out infinite;
}
@keyframes arch-typing-blink{
  0%,100% {opacity:.35;transform:scale(.8)}
  50%     {opacity:1;transform:scale(1)}
}

.arch-chat-pane-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.arch-chat-pane-action{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:none;background:transparent;color:var(--text-muted);
  cursor:pointer;text-decoration:none;font-size:16px;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.arch-chat-pane-action:hover{background:var(--overlay-soft);color:var(--accent)}

/* ── Message thread ── */
.arch-chat-thread{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  padding:20px 24px 12px;
  display:flex;flex-direction:column;gap:4px;
  scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:rgba(205,161,44,.30) transparent;
}
.arch-chat-thread::-webkit-scrollbar{width:6px}
.arch-chat-thread::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.arch-chat-thread::-webkit-scrollbar-thumb{
  background:rgba(205,161,44,.22);border-radius:99px;
  border:1px solid transparent;background-clip:padding-box;
}
.arch-chat-thread::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box}
.arch-chat-older-sentinel{height:0;overflow:hidden;flex-shrink:0}
.arch-chat-thread > .arch-bubble-row:nth-child(2),
.arch-chat-thread > .arch-chat-day:nth-child(2),
.arch-chat-thread > .arch-chat-loading:nth-child(2){margin-top:auto}
.arch-chat-thread > .arch-chat-empty:nth-child(2){margin-top:auto;margin-bottom:auto}
.arch-chat-day{
  align-self:center;
  font-size:11px;font-weight:600;color:rgba(255,255,255,.28);
  text-transform:uppercase;letter-spacing:.08em;
  padding:4px 14px;margin:12px 0 6px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:99px;
  backdrop-filter:blur(8px);
}
.arch-chat-loading{
  align-self:center;
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px;margin:6px 0 2px;
  background:rgba(205,161,44,.07);border:1px solid rgba(205,161,44,.22);
  border-radius:99px;
  color:var(--accent);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  animation:arch-bubble-in var(--dur-med) var(--ease);
}
.arch-chat-loading i{font-size:11px}

.arch-bubble-row{
  display:flex;align-items:flex-end;gap:8px;
  animation:arch-bubble-in var(--dur-med) var(--ease);
}
.arch-bubble-row.is-mine{flex-direction:row-reverse}
.arch-bubble-row.is-grouped{margin-top:-3px}
.arch-bubble-row.is-grouped .arch-bubble-avatar{visibility:hidden}
@keyframes arch-bubble-in{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:translateY(0)}
}
.arch-bubble-avatar{
  width:32px;height:32px;border-radius:50%;
  flex-shrink:0;overflow:hidden;
}
.arch-bubble-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.arch-bubble{
  max-width:min(500px,70%);
  display:flex;flex-direction:column;gap:2px;
  align-items:flex-start;
  position:relative;
}
.arch-bubble-row.is-mine .arch-bubble{align-items:flex-end}

/* Text bubble */
.arch-bubble-text{
  margin:0;padding:10px 14px;
  font-size:14.5px;line-height:1.55;overflow-wrap:break-word;
  border-radius:18px;
  max-width:100%;
}
/* Mine — flat gold */
.arch-bubble-row.is-mine .arch-bubble-text{
  background:var(--accent);
  color:#0a0e14;
  border-bottom-right-radius:4px;
  font-weight:500;
  box-shadow:0 2px 10px rgba(205,161,44,.28),0 1px 3px rgba(0,0,0,.18);
}
.arch-bubble-row.is-mine.is-grouped .arch-bubble-text{border-bottom-right-radius:18px}
.arch-bubble-row.is-mine .arch-bubble-text a{color:rgba(12,18,25,.85);text-decoration:underline}
.arch-bubble-row.is-mine .arch-bubble-text a:hover{color:#0c1219}
/* Theirs */
.arch-bubble-row.is-theirs .arch-bubble-text{
  background:#1e2d41;
  color:var(--text-primary);
  border-bottom-left-radius:4px;
  border:none;
  box-shadow:0 1px 5px rgba(0,0,0,.22);
}
.arch-bubble-row.is-theirs.is-grouped .arch-bubble-text{border-bottom-left-radius:18px}
.arch-bubble-row.is-theirs .arch-bubble-text a{color:var(--accent);text-decoration:underline}

/* Emoji-only bubble — no background, larger glyph */
.arch-bubble.is-emoji-only .arch-bubble-text,
.arch-bubble-row.is-mine .arch-bubble.is-emoji-only .arch-bubble-text,
.arch-bubble-row.is-theirs .arch-bubble.is-emoji-only .arch-bubble-text{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:2px 4px;
  font-size:36px;
  line-height:1.15;
  font-weight:400;
  color:inherit;
}

/* Timestamp row */
.arch-bubble-time{
  font-size:10.5px;color:var(--text-muted);line-height:1;
  padding:0 2px;
  display:inline-flex;align-items:center;gap:4px;
}
.arch-bubble-footer{display:inline-flex;align-items:center;gap:4px}
.arch-bubble-row.is-grouped + .arch-bubble-row.is-grouped .arch-bubble-footer,
.arch-bubble-row.is-grouped:not(:last-child) .arch-bubble-footer{display:none}

/* ── Attachments inside a bubble ── */
.arch-att-grid{
  display:grid;gap:4px;max-width:100%;
}
.arch-att-grid.count-1{grid-template-columns:1fr}
.arch-att-grid.count-2{grid-template-columns:1fr 1fr;width:300px;max-width:100%}
.arch-att-grid.count-3,
.arch-att-grid.count-4,
.arch-att-grid.count-5,
.arch-att-grid.count-6{grid-template-columns:1fr 1fr 1fr;width:340px;max-width:100%}

.arch-att-thumb{
  position:relative;display:block;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  text-decoration:none;line-height:0;
  transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-med) var(--ease);
}
.arch-att-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Single image keeps natural aspect, capped. Multi-image grid forces square. */
.arch-att-grid.count-1 .arch-att-thumb img{
  width:auto;height:auto;max-width:340px;max-height:340px;
}
.arch-att-grid:not(.count-1) .arch-att-thumb{aspect-ratio:1/1}
.arch-att-thumb:hover{
  border-color:rgba(205,161,44,.55);transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.32);
}
/* Hover overlay reveals an "open" affordance on image thumbs. */
.arch-att-thumb::after{
  content:"\f06e"; /* fa-eye */
  font-family:"Font Awesome 6 Free";font-weight:400;
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,transparent 50%,rgba(12,18,25,.55));
  color:#fff;font-size:18px;
  opacity:0;transition:opacity var(--dur-fast) var(--ease);
  pointer-events:none;
}
.arch-att-thumb:hover::after{opacity:1}

/* File card — ext-coloured icon tile + name + size + open arrow. */
.arch-att-file{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 14px;min-width:240px;max-width:340px;
  background:var(--bg-card);
  border:1px solid var(--border);border-radius:14px;
  text-decoration:none;color:var(--text-primary)!important;
  position:relative;
  transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-med) var(--ease);
}
.arch-att-file:hover{
  border-color:rgba(205,161,44,.55);transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.32);
}
.arch-att-file-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(205,161,44,.12);color:var(--accent);font-size:16px;
}
.arch-att-file-icon[data-ext="pdf"]{background:rgba(220,53,69,.16);color:#f25b67}
.arch-att-file-icon[data-ext="dwg"],
.arch-att-file-icon[data-ext="dxf"]{background:rgba(245,191,66,.16);color:#f5bf42}
.arch-att-file-icon[data-ext="psd"]{background:rgba(83,155,245,.16);color:#539bf5}
.arch-att-file-icon[data-ext="doc"],
.arch-att-file-icon[data-ext="docx"]{background:rgba(83,155,245,.16);color:#539bf5}
.arch-att-file-icon[data-ext="xls"],
.arch-att-file-icon[data-ext="xlsx"],
.arch-att-file-icon[data-ext="csv"]{background:rgba(34,197,94,.16);color:#4ade80}
.arch-att-file-icon[data-ext="zip"],
.arch-att-file-icon[data-ext="rar"],
.arch-att-file-icon[data-ext="7z"]{background:rgba(180,83,9,.18);color:#f59e0b}
.arch-att-file-icon[data-ext="ppt"],
.arch-att-file-icon[data-ext="pptx"]{background:rgba(236,77,46,.16);color:#f97a5b}
.arch-att-file-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;line-height:1.3}
.arch-att-file-name{
  font-size:13px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
}
.arch-att-file-sub{
  font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
}
/* No explicit download chip — the entire .arch-att-file anchor carries
 * the [download] attribute, so a click anywhere on the card saves the
 * file. The hover-lift + accent border alone signal that it's clickable. */

/* ── Composer ── */
.arch-composer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:10px 16px 14px;
  background:#111826;
  flex-shrink:0;
}
/* Block-accumulation warning banner */
.user-warning-banner{
  display:flex;align-items:center;gap:14px;
  margin:14px auto;max-width:1080px;
  padding:14px 18px;
  background:rgba(205,161,44,.08);
  border:1px solid rgba(205,161,44,.30);
  border-radius:var(--radius-md);
  box-shadow:0 4px 18px rgba(0,0,0,.10);
}
.user-warning-banner-icon{font-size:22px;color:var(--accent);flex-shrink:0}
.user-warning-banner-body{flex:1;min-width:0}
.user-warning-banner-title{
  font-weight:700;color:var(--text-primary);margin:0 0 2px;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.04em;
}
.user-warning-banner-msg{font-size:13.5px;color:var(--text-secondary);margin:0;line-height:1.45}
/* Blocked-direction banner */
.arch-composer-blocked{
  display:flex;align-items:center;gap:14px;
  background:rgba(178,62,61,.06);
  border-top:1px solid rgba(178,62,61,.28);
  padding:12px 18px 14px;flex-shrink:0;
}
.arch-composer-blocked-icon{font-size:22px;color:var(--danger);flex-shrink:0}
.arch-composer-blocked-body{flex:1;min-width:0}
.arch-composer-blocked-title{font-weight:700;color:var(--text-primary);margin:0 0 2px;font-size:14px}
.arch-composer-blocked-sub{font-size:12.5px;color:var(--text-muted);margin:0;line-height:1.4}
/* Staged-files tray */
.arch-composer-staged{
  list-style:none;margin:0 0 8px;padding:8px 2px 4px;
  display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
}
.arch-composer-staged::-webkit-scrollbar{height:4px}
.arch-composer-staged li{
  position:relative;flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 8px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;
  height:54px;max-width:220px;
  transition:border-color var(--dur-fast) var(--ease);
}
.arch-composer-staged li:hover{border-color:rgba(205,161,44,.4)}
.arch-composer-staged li.is-image{padding:0;width:54px;max-width:54px;background:transparent;border:0}
.arch-composer-staged-thumb{
  flex-shrink:0;width:42px;height:42px;border-radius:8px;overflow:hidden;
  background:var(--bg-deep);display:inline-flex;align-items:center;justify-content:center;
}
.arch-composer-staged li.is-image .arch-composer-staged-thumb{
  width:54px;height:54px;border-radius:10px;border:1px solid var(--border);
}
.arch-composer-staged-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.arch-composer-staged-thumb i{color:var(--accent);font-size:14px}
.arch-composer-staged-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;line-height:1.25}
.arch-composer-staged-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.arch-composer-staged-sub{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.arch-composer-staged-remove{
  position:absolute;top:-5px;inset-inline-end:-5px;
  width:18px;height:18px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg-deep);
  color:var(--text-muted);cursor:pointer;font-size:8px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);z-index:2;
}
.arch-composer-staged-remove:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
/* Composer input row */
.arch-composer-row{display:flex;align-items:flex-end;gap:8px}
.arch-composer-attach{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  border:none;border-radius:50%;
  background:transparent;color:var(--text-muted);
  font-size:17px;cursor:pointer;
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.arch-composer-attach:hover{color:var(--accent);background:var(--accent-dim)}
.arch-composer-input{
  flex:1;min-height:42px;max-height:160px;
  background:#0e1a2a;border:1px solid rgba(255,255,255,.08);
  border-radius:22px;padding:10px 16px;
  color:var(--text-primary);font-size:14px;line-height:1.5;
  font-family:inherit;resize:none;outline:none;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.arch-composer-input:focus{
  border-color:rgba(205,161,44,.40);background:#0b1525;
}
.arch-composer-send{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex-shrink:0;
  background:var(--accent);color:#0c1219!important;
  border:none;border-radius:50%;cursor:pointer;font-size:16px;
  box-shadow:0 3px 10px rgba(205,161,44,.32);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-med) var(--ease),background var(--dur-fast) var(--ease);
}
.arch-composer-send span{display:none}
.arch-composer-send:hover{transform:scale(1.06);box-shadow:0 6px 18px rgba(205,161,44,.48)}
.arch-composer-send:active{transform:scale(.95)}
.arch-composer-send:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Empty states ── */
.arch-chat-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 28px;text-align:center;color:var(--text-muted);
}
.arch-chat-empty-icon{
  width:80px;height:80px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:32px;margin:0 auto 18px;
  filter:drop-shadow(0 4px 12px rgba(205,161,44,.25));
}
.arch-chat-empty h4{font-size:17px;color:var(--text-primary);margin:0 0 6px;font-weight:600}
.arch-chat-empty p{font-size:13.5px;color:var(--text-muted);margin:0;max-width:320px;line-height:1.55}

/* ════════════════════════════════════════════════════════════════
 * Phase 3 — message lifecycle UI
 * ════════════════════════════════════════════════════════════════
 * Adds: reply quote card, reaction chips, reaction picker, action
 * bar (hover/long-press toolbar), tombstone variant, edited pill,
 * read-receipt double-check, in-place edit editor, composer reply
 * chip. All tokens stay inside the existing `--accent` / `--border`
 * /`--bg-*` palette; no new button class beyond the four approved.
 */

/* ── Reply quote card (above the bubble's text) ── */
.arch-bubble-reply{
  display:block;text-decoration:none;
  padding:7px 12px;margin-bottom:3px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-inline-start:3px solid var(--accent);
  border-radius:10px;
  font-size:12px;line-height:1.4;
  color:var(--text-secondary);
  max-width:100%;
  overflow:hidden;text-overflow:ellipsis;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.arch-bubble-reply:hover{
  background:var(--bg-surface);
  border-color:rgba(205,161,44,.35);
}
.arch-bubble-reply-name{
  display:block;font-size:11px;font-weight:700;
  color:var(--accent);letter-spacing:.01em;margin-bottom:1px;
}
.arch-bubble-reply-body{
  display:block;font-size:12.5px;
  color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arch-bubble-reply-deleted{font-style:italic;color:var(--text-muted)}

/* Mine-side: same card, keep everything consistent — the card sits on
 * the thread background (not on the gold bubble) so colours are identical. */
.arch-bubble-row.is-mine .arch-bubble-reply{
  border-inline-start-color:rgba(205,161,44,.75);
}

/* Flash highlight on jump-to-reply. The animation matches the
 * subtle bubble-in keyframes already in the chat shell. */
.arch-bubble-row.is-flash .arch-bubble{
  animation:arch-bubble-flash 1.4s ease-out;
}
@keyframes arch-bubble-flash{
  0%   {box-shadow:0 0 0 0 rgba(205,161,44,.0)}
  15%  {box-shadow:0 0 0 4px rgba(205,161,44,.55)}
  100% {box-shadow:0 0 0 0 rgba(205,161,44,0)}
}

/* ── Tombstone bubble ── */
.arch-bubble-row.is-deleted .arch-bubble-text{
  font-style:italic;
  color:var(--text-muted)!important;
  background:transparent!important;
  border:1px dashed rgba(255,255,255,.10)!important;
  box-shadow:none!important;
  font-weight:400;
}
.arch-bubble-tombstone{
  display:inline-flex;align-items:center;gap:6px;
}
.arch-bubble-tombstone i{font-size:13px;opacity:.7}

/* ── Edited pill (small italic tag inside the time row) ── */
.arch-bubble-edited{
  font-style:italic;color:var(--text-muted);
  font-size:10.5px;
}
.arch-bubble-row.is-mine .arch-bubble-edited{color:rgba(26,20,8,.6)}

/* ── Read receipts ── */
/* Receipt is a direct child of .arch-bubble (flex column), not inside .arch-bubble-footer.
   align-self:flex-end right-aligns it for is-mine rows automatically. */
.arch-bubble-receipt{
  display:inline-flex;align-items:center;gap:2px;
  font-size:11px;color:var(--text-muted);
  align-self:flex-end;
  margin-block-start:-2px;
}
.arch-bubble-receipt i{font-size:10px}
.arch-bubble-receipt.is-read{color:var(--accent)}
/* Group reader-count badge */
.arch-receipt-count{
  font-size:10px;font-weight:600;font-style:normal;line-height:1;
}

/* ── Reaction chip row ── */
.arch-bubble-reactions{
  display:flex;flex-wrap:wrap;gap:4px;
  margin-top:2px;
}
.arch-bubble-reaction-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:99px;
  font-size:12px;line-height:1.2;
  color:var(--text-secondary);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.10);
  transition:border-color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.arch-bubble-reaction-chip:hover{
  border-color:rgba(205,161,44,.45);
  transform:scale(1.06);
}
.arch-bubble-reaction-chip.is-mine{
  background:rgba(205,161,44,.12);
  border-color:rgba(205,161,44,.50);
  color:var(--accent);
}
.arch-bubble-reaction-emoji{font-size:14px}
.arch-bubble-reaction-count{font-size:11px;font-weight:700}

/* ── Action toolbar (appended to .arch-chat-pane, positioned by JS) ── */
.arch-bubble{position:relative}
.arch-bubble-actions{
  position:absolute;
  display:flex;gap:1px;
  padding:3px;
  background:rgba(18,28,48,.62);
  border:1px solid rgba(255,255,255,.10);
  border-radius:99px;
  box-shadow:0 6px 20px rgba(0,0,0,.30),0 1px 4px rgba(0,0,0,.18);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  z-index:10;
  white-space:nowrap;
  animation:arch-bubble-in var(--dur-fast) var(--ease);
}
.arch-bubble-action{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border:none;background:transparent;
  border-radius:50%;
  color:var(--text-secondary);
  font-size:12px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.arch-bubble-action:hover{
  background:rgba(205,161,44,.12);
  color:var(--accent);
}
.arch-bubble-action-danger:hover{
  background:rgba(178,62,61,.16);
  color:var(--danger);
}
.arch-bubble-action.is-done{color:var(--success,#3a9b6a)}
.arch-bubble-action.is-pinned{color:var(--accent)}
.arch-pin-notice{
  position:absolute;bottom:80px;inset-inline-start:50%;
  transform:translateX(-50%);
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:8px;padding:8px 16px;
  font-size:13px;color:var(--text-primary);
  box-shadow:0 4px 16px rgba(0,0,0,.30);
  white-space:nowrap;z-index:30;
  animation:arch-bubble-in var(--dur-fast) var(--ease);
  pointer-events:none;
}

/* ── Reaction picker popover ── */
.arch-reaction-picker{
  position:absolute;
  display:flex;gap:2px;padding:4px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:99px;
  box-shadow:0 6px 18px rgba(0,0,0,.32);
  z-index:12;
  animation:arch-bubble-in var(--dur-med) var(--ease);
}
.arch-reaction-pick{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border:none;background:transparent;
  border-radius:50%;
  font-size:18px;line-height:1;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.arch-reaction-pick:hover{
  background:rgba(205,161,44,.12);
  transform:scale(1.18);
}

/* ── In-place edit editor ── */
.arch-bubble-editor-wrap{
  padding:6px 16px 10px;
  animation:arch-bubble-in var(--dur-fast) var(--ease);
}
.arch-bubble-editor{
  border:1px solid rgba(205,161,44,.40);
  border-radius:14px;
  background:var(--bg-card);
  box-shadow:0 4px 20px rgba(0,0,0,.28);
  overflow:hidden;
}
.arch-bubble-editor-head{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px 8px;
  font-size:12px;font-weight:600;color:var(--accent);
  border-bottom:1px solid var(--border);
}
.arch-bubble-editor-head i{font-size:11px}
.arch-bubble-editor-input{
  display:block;width:100%;min-height:80px;
  padding:12px 14px;
  background:transparent;border:none;outline:none;
  color:var(--text-primary);
  font-size:14.5px;font-family:inherit;line-height:1.55;
  resize:none;box-sizing:border-box;
}
.arch-bubble-editor-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px 10px;
  border-top:1px solid var(--border);
}
.arch-bubble-editor-hint{
  font-size:11px;color:var(--text-muted);
}
.arch-bubble-editor-actions{
  display:flex;gap:8px;
}
.arch-bubble-editor-cancel,
.arch-bubble-editor-save{
  font-size:13px;padding:7px 18px;
  border-radius:8px;cursor:pointer;
}

/* Light mode */
[data-theme="light"] .arch-bubble-editor{
  background:var(--bg-card);
  border-color:rgba(184,134,42,.38);
  box-shadow:0 4px 16px rgba(0,0,0,.10);
}

/* ── Composer reply chip ── */
.arch-composer-reply{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;margin-bottom:8px;
  background:rgba(205,161,44,.08);
  border:1px solid rgba(205,161,44,.30);
  border-radius:10px;
  color:var(--text-secondary);
  animation:arch-bubble-in var(--dur-fast) var(--ease);
}
.arch-composer-reply > i{
  color:var(--accent);font-size:14px;flex-shrink:0;
}
.arch-composer-reply-meta{
  flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;
}
.arch-composer-reply-label{
  font-size:11px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.06em;
}
.arch-composer-reply-body{
  font-size:13px;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arch-composer-reply-cancel{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex-shrink:0;
  border:1px solid var(--border);
  background:var(--bg-deep);
  color:var(--text-muted);
  border-radius:50%;
  cursor:pointer;font-size:10px;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.arch-composer-reply-cancel:hover{
  background:var(--danger);color:#fff;border-color:var(--danger);
}

/* ════════════════════════════════════════════════════════════════
 * Phase 8 — AI assist surface
 * ════════════════════════════════════════════════════════════════
 * Adds: summary strip above the chat thread, suggest-reply + tone-
 * check pills above the composer, AI loading state, soften prompt
 * styling. Same `--accent` token as the rest of the messaging app —
 * AI surfaces blend with the gold palette rather than inventing a
 * new "AI" colour.
 */

.arch-chat-ai-strip{
  display:flex;flex-direction:column;gap:6px;
  padding:8px 22px 0;
}
.arch-chat-ai-pill{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;
  background:rgba(205,161,44,.08);
  border:1px solid rgba(205,161,44,.30);
  border-radius:99px;
  color:var(--accent);font-size:12px;font-weight:600;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.arch-chat-ai-pill:hover{
  background:rgba(205,161,44,.18);
  border-color:rgba(205,161,44,.55);
}
.arch-chat-ai-pill.is-loading{
  opacity:.6;cursor:wait;
}
.arch-chat-ai-pill.is-on{
  background:var(--accent);color:var(--bg-deep);
  border-color:var(--accent);
}
.arch-chat-ai-pill-sm{
  font-size:11px;padding:3px 10px;
}
.arch-chat-ai-pill i{font-size:11px}

.arch-chat-ai-summary{
  background:rgba(205,161,44,.06);
  border:1px solid rgba(205,161,44,.22);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;color:var(--text-secondary);line-height:1.55;
}
.arch-chat-ai-summary[hidden]{display:none}
.arch-ai-bullets{
  margin:0;padding-inline-start:18px;
  display:flex;flex-direction:column;gap:4px;
}
.arch-ai-bullets li{list-style:disc;color:var(--text-secondary)}

.arch-ai-error{
  font-style:italic;color:var(--text-muted);font-size:12.5px;
}
.arch-ai-loading{
  font-style:italic;color:var(--text-muted);font-size:12.5px;
  display:inline-flex;align-items:center;gap:4px;
}

.arch-composer-ai-row{
  display:flex;gap:8px;
  margin-bottom:6px;
  flex-wrap:wrap;
}

/* Audio + video attachment bubbles (inline native players) */
.arch-att-voice,
.arch-att-video{
  display:flex;align-items:center;gap:8px;
  margin-top:6px;padding:6px 10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  max-width:100%;
}
.arch-att-voice i{
  color:var(--accent);font-size:14px;flex-shrink:0;
}
.arch-att-voice audio{
  flex:1;min-width:0;height:30px;
}
.arch-att-voice-dur,
.arch-att-video-dur{
  font-size:11px;color:var(--text-muted);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.arch-att-video{
  flex-direction:column;align-items:stretch;padding:6px;gap:4px;
  max-width:340px;
}
.arch-att-video video{
  width:100%;max-height:260px;border-radius:8px;background:#000;
}
.arch-att-video-dur{align-self:flex-end;padding:0 6px}

/* ════════════════════════════════════════════════════════════════
 * Phase 5 — group DM rendering
 * ════════════════════════════════════════════════════════════════
 * Adds: stacked avatar tile (inbox row + chat header), member-count
 * sub-line, group-aware name display. Same `--accent` / `--border`
 * palette as the rest of the chat shell.
 */

/* Inbox: stacked avatar tile (3 overlapping circles + optional +N) */
.arch-chat-conv-avatar-group{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;
  width:44px;height:44px;
  background:transparent;border:none;
}
.arch-chat-conv-avatar-stacked{
  width:24px;height:24px;border-radius:50%;
  border:2px solid #111826;
  position:absolute;object-fit:cover;
  background:var(--bg-deep);
}
.arch-chat-conv-avatar-stacked:nth-child(1){left:0;top:2px;z-index:3}
.arch-chat-conv-avatar-stacked:nth-child(2){left:14px;top:14px;z-index:2}
.arch-chat-conv-avatar-stacked:nth-child(3){left:0;top:24px;z-index:1}
.arch-chat-conv-avatar-more{
  position:absolute;right:-4px;bottom:-4px;
  min-width:20px;height:20px;padding:0 5px;
  border-radius:99px;
  background:var(--accent);color:var(--bg-deep);
  font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid #111826;
  z-index:4;
}

/* Chat header: same pattern but bigger (46×46 footprint to match
 * the existing 1:1 avatar). */
.arch-chat-pane-avatar-group{
  position:relative;
  width:46px;height:46px;
  display:inline-flex;flex-shrink:0;
  background:transparent;
  box-shadow:none;border:none;overflow:visible;
}
.arch-chat-pane-avatar-group .arch-chat-pane-avatar-stacked{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--bg-deep);
  position:absolute;object-fit:cover;
  background:var(--bg-deep);
  box-shadow:0 0 0 2px rgba(205,161,44,.18);
}
.arch-chat-pane-avatar-group .arch-chat-pane-avatar-stacked:nth-child(1){left:0;top:2px;z-index:3}
.arch-chat-pane-avatar-group .arch-chat-pane-avatar-stacked:nth-child(2){left:14px;top:14px;z-index:2}
.arch-chat-pane-avatar-group .arch-chat-pane-avatar-stacked:nth-child(3){left:0;top:22px;z-index:1}
.arch-chat-pane-avatar-more{
  position:absolute;right:-6px;bottom:-2px;
  min-width:22px;height:22px;padding:0 6px;
  border-radius:99px;
  background:var(--accent);color:var(--bg-deep);
  font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--bg-deep);
  z-index:4;
}

.arch-chat-conv.is-group .arch-chat-conv-name{
  display:inline-flex;align-items:center;gap:4px;
}
.is-group-head .arch-chat-pane-name{
  font-weight:700;
}

/* ════════════════════════════════════════════════════════════════
 * Phase 4 — power-user surface
 * ════════════════════════════════════════════════════════════════
 * Adds: archive fold-out (inbox), header actions menu (mute /
 * archive / leave), pinned strip, in-thread search bar, mention
 * pill, OG link-preview card. All inside the existing token
 * palette — no new accent colours, no fifth button class.
 */

/* ── Inbox: archive fold-out ── */
.arch-chat-archived{
  margin-top:14px;border-top:1px solid rgba(255,255,255,.06);padding-top:8px;
}
.arch-chat-archived-head{
  list-style:none;cursor:pointer;
  padding:8px 14px;
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
  user-select:none;
  border-radius:6px;
  transition:background var(--dur-fast) var(--ease);
}
.arch-chat-archived-head::-webkit-details-marker{display:none}
.arch-chat-archived-head:hover{background:rgba(255,255,255,.04)}
.arch-chat-archived-head i{font-size:11px}
.arch-chat-archived-count{font-weight:600;color:var(--text-muted)}
.arch-chat-conv-archived{opacity:.8}
.arch-chat-conv.is-muted .arch-chat-conv-name i{
  font-size:10px;color:var(--text-muted);margin-inline-start:4px;
}

/* ── Pane menu (mute / archive / leave) ── */
.arch-chat-pane-menu{position:relative}
.arch-chat-pane-menu-list{
  position:absolute;top:42px;inset-inline-end:0;
  min-width:200px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  padding:6px;z-index:20;
  display:flex;flex-direction:column;gap:2px;
  animation:arch-bubble-in var(--dur-fast) var(--ease);
}
.arch-chat-pane-menu-list[hidden]{display:none}
.arch-chat-pane-menu-item{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 10px;
  background:transparent;border:none;
  color:var(--text-secondary);
  border-radius:6px;cursor:pointer;
  font-size:13px;text-align:start;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.arch-chat-pane-menu-item:hover{
  background:rgba(205,161,44,.10);color:var(--accent);
}
.arch-chat-pane-menu-item i{width:14px;font-size:12px}
.arch-chat-pane-menu-item-danger:hover{
  background:rgba(178,62,61,.14);color:var(--danger);
}

/* ── New-conversation user-search modal ── */
/* Pin the dialog at a fixed top so results growing/shrinking never
   shifts the modal's vertical position. */
.arch-new-conv-dialog{margin:12vh auto 0}
.arch-new-conv-body{padding:0 22px 22px}
.arch-new-conv-search-wrap{position:relative;margin-bottom:14px}
.arch-new-conv-search-wrap>i{
  position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:13px;pointer-events:none;
}
.arch-new-conv-input{
  width:100%;padding:9px 14px 9px 36px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;
  color:var(--text-primary);font-size:13.5px;
  transition:border-color .15s;
}
[dir="rtl"] .arch-new-conv-input{padding-inline-start:36px;padding-inline-end:14px}
.arch-new-conv-input:focus{outline:none;border-color:var(--accent)}
.arch-new-conv-results{min-height:60px;max-height:320px;overflow-y:auto}
.arch-new-conv-hint,.arch-new-conv-empty{
  color:var(--text-muted);font-size:13px;text-align:center;padding:20px 0;margin:0;
}
.arch-new-conv-user{
  display:flex;align-items:center;gap:12px;
  padding:10px 4px;
  border-bottom:1px solid var(--border);
  text-decoration:none;
}
.arch-new-conv-user:last-child{border-bottom:none}
.arch-new-conv-user:hover .arch-new-conv-name{color:var(--accent)}
.arch-new-conv-avatar{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.arch-new-conv-meta{flex:1;min-width:0}
.arch-new-conv-name{
  display:block;font-size:13.5px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arch-new-conv-sub{
  display:block;font-size:11.5px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;
}
.arch-new-conv-go{font-size:11px;color:var(--text-muted);flex-shrink:0}

/* ── Pinned strip (under chat header) ── */
.arch-chat-pinned{
  display:flex;align-items:center;gap:10px;
  padding:8px 22px;
  background:rgba(205,161,44,.08);
  border-bottom:1px solid rgba(205,161,44,.22);
  font-size:13px;
}
.arch-chat-pinned[hidden]{display:none}
.arch-chat-pinned i{color:var(--accent);font-size:13px}
.arch-chat-pinned-label{
  font-weight:700;color:var(--accent);
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;
}
.arch-chat-pinned-body{
  flex:1;min-width:0;
  color:var(--text-secondary);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arch-chat-pinned-body:hover{color:var(--accent)}
.arch-chat-pinned-body i{font-size:11px;opacity:.8}
.arch-chat-pinned-nav{
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;margin-inline-start:auto;
}
.arch-chat-pinned-count{
  font-size:11px;font-weight:700;color:var(--accent);
  min-width:28px;text-align:center;
}
.arch-chat-pinned-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  border:1px solid rgba(205,161,44,.30);border-radius:4px;
  background:transparent;color:var(--accent);font-size:9px;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.arch-chat-pinned-btn:hover{background:rgba(205,161,44,.15)}
.arch-chat-pinned-btn[hidden]{display:none}

/* ── Emoji picker ── */
.arch-composer-emoji-picker{
  position:absolute;
  display:grid;grid-template-columns:repeat(9,1fr);
  gap:2px;padding:8px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:30;
  width:284px;
  max-height:240px;overflow-y:auto;
  animation:arch-bubble-in var(--dur-fast) var(--ease);
}
.arch-composer-emoji-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;
  border:none;background:transparent;
  font-size:18px;border-radius:6px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.arch-composer-emoji-btn:hover{background:var(--overlay-soft)}

/* ── In-thread search bar ── */
.arch-chat-search-bar{
  position:relative;
  display:flex;align-items:center;gap:8px;
  padding:8px 22px;
  background:#0a1219;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.arch-chat-search-bar[hidden]{display:none}
.arch-chat-search-bar > i{color:var(--text-muted);font-size:13px}
.arch-chat-search-bar input{
  flex:1;height:32px;padding:0 10px;
  background:#0e1a2a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  color:var(--text-primary);font-size:13px;outline:none;
}
.arch-chat-search-bar input:focus{
  border-color:rgba(205,161,44,.55);
  box-shadow:0 0 0 3px rgba(205,161,44,.10);
}
.arch-chat-search-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border:none;background:transparent;color:var(--text-muted);
  border-radius:50%;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.arch-chat-search-close:hover{background:var(--overlay-soft);color:var(--text-primary)}

.arch-chat-search-results{
  position:absolute;left:22px;right:22px;top:46px;
  max-height:260px;overflow-y:auto;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  z-index:15;
  display:flex;flex-direction:column;
}
.arch-chat-search-results[hidden]{display:none}
.arch-chat-search-result{
  display:block;padding:8px 12px;
  text-decoration:none;color:inherit;
  border-bottom:1px solid var(--border);
  font-size:12.5px;
  transition:background var(--dur-fast) var(--ease);
}
.arch-chat-search-result:last-child{border-bottom:none}
.arch-chat-search-result:hover{background:rgba(205,161,44,.08)}
.arch-chat-search-result-meta{
  display:block;font-size:11px;color:var(--text-muted);
  font-weight:600;letter-spacing:.02em;margin-bottom:2px;
}
.arch-chat-search-result-snippet{
  display:block;color:var(--text-secondary);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arch-chat-search-mark{
  background:rgba(205,161,44,.32);
  color:var(--accent);
  padding:0 2px;border-radius:2px;
}
.arch-chat-search-empty{
  padding:14px;font-size:12.5px;color:var(--text-muted);
  text-align:center;
}

/* ── Mention pill (inside bubble body) ── */
.arch-mention{
  color:var(--accent);font-weight:600;
  background:rgba(205,161,44,.10);
  padding:0 4px;border-radius:4px;
}
.arch-bubble-row.is-mine .arch-mention{
  color:rgba(26,20,8,.95);
  background:rgba(0,0,0,.12);
}

/* ── OG link-preview card ── */
.arch-bubble-og{
  display:flex;gap:10px;
  margin-top:6px;padding:10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-inline-start:3px solid var(--accent);
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  max-width:420px;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.arch-bubble-og:hover{
  border-color:rgba(205,161,44,.55);
  background:var(--bg-surface);
}
.arch-bubble-og-thumb{
  flex-shrink:0;width:80px;height:80px;
  border-radius:8px;overflow:hidden;
  background:var(--bg-deep);
}
.arch-bubble-og-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.arch-bubble-og-meta{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  line-height:1.35;
}
.arch-bubble-og-site{
  font-size:11px;color:var(--accent);
  text-transform:uppercase;letter-spacing:.04em;font-weight:700;
}
.arch-bubble-og-title{
  font-size:13px;font-weight:600;color:var(--text-primary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.arch-bubble-og-desc{
  font-size:12px;color:var(--text-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.arch-bubble-row.is-mine .arch-bubble-og{
  background:rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.18);
  border-inline-start-color:rgba(26,20,8,.55);
  color:rgba(26,20,8,.92);
}
.arch-bubble-row.is-mine .arch-bubble-og-site{color:rgba(26,20,8,.95)}
.arch-bubble-row.is-mine .arch-bubble-og-title{color:rgba(26,20,8,.92)}
.arch-bubble-row.is-mine .arch-bubble-og-desc{color:rgba(26,20,8,.7)}

/* ── Responsive ── */
/* The fixed mobile bottom-nav (60px + safe-area, z-index 1029) sits at
   bottom:0 and would otherwise cover the composer + the last conversation
   row. The chat page scrolls internally (the window never scrolls), so the
   nav never auto-hides here — pull the whole fixed chat region up so it ends
   exactly above the nav. Keyed to the nav's own 991.98px breakpoint so the
   reserved space matches its visibility precisely. */
@media (max-width:991.98px){
  .arch-chat-page{bottom:calc(60px + env(safe-area-inset-bottom))}
}
@media (max-width:992px){
  .arch-chat-shell{grid-template-columns:1fr}
  .arch-chat-shell.is-thread .arch-chat-rail{display:none}
  .arch-chat-shell:not(.is-thread) .arch-chat-pane{display:none}
  .arch-chat-rail{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
}
@media (max-width:520px){
  .arch-chat-thread{padding:16px 12px 10px}
  .arch-chat-pane-head{padding:12px 14px}
  .arch-composer{padding:8px 10px 12px}
  .arch-bubble{max-width:84%}
}

/* ── Image lightbox (chat + view_job inline threads) ─────────────
 * Glass overlay with a centred image, close × button, prev/next
 * arrows when navigating multiple images, ESC + outside-click to
 * dismiss. Single shared element, JS in script.js drives it. */
.arch-lightbox{
  position:fixed;inset:0;z-index:2000;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(8,12,18,.78);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  animation:arch-lightbox-fade var(--dur-med) var(--ease);
}
.arch-lightbox.is-open{display:flex}
@keyframes arch-lightbox-fade{
  from{opacity:0}
  to  {opacity:1}
}
.arch-lightbox-stage{
  position:relative;
  max-width:min(92vw,1400px);max-height:88vh;
  display:flex;align-items:center;justify-content:center;
  animation:arch-lightbox-zoom var(--dur-med) var(--ease);
}
@keyframes arch-lightbox-zoom{
  from{opacity:0;transform:scale(.95)}
  to  {opacity:1;transform:scale(1)}
}
.arch-lightbox-img{
  max-width:100%;max-height:88vh;
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 0 1px rgba(205,161,44,.20);
  display:block;
}
.arch-lightbox-close{
  position:absolute;top:18px;inset-inline-end:18px;
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(12,18,25,.78);border:1px solid var(--border-hover);
  color:#fff;font-size:16px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
  z-index:2;
}
.arch-lightbox-close:hover{
  background:var(--danger);border-color:var(--danger);
  transform:scale(1.05);
}
.arch-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(12,18,25,.62);border:1px solid var(--border-hover);
  color:#fff;font-size:16px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
  z-index:2;
}
.arch-lightbox-nav:hover{background:rgba(205,161,44,.85);border-color:var(--accent);color:#1a1408}
.arch-lightbox-nav.prev{inset-inline-start:18px}
.arch-lightbox-nav.next{inset-inline-end:18px}
.arch-lightbox-nav[disabled]{opacity:.30;pointer-events:none}
.arch-lightbox-caption{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  padding:6px 14px;border-radius:99px;
  background:rgba(12,18,25,.72);border:1px solid var(--border);
  color:rgba(255,255,255,.85);font-size:12px;letter-spacing:.02em;
  max-width:80vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* In-bubble thumbs become clickable buttons (no underline / no blue). */
.arch-att-thumb,
.jv-msg-att-img{cursor:zoom-in}

/* messaging back-link is mobile-only (default: hidden on desktop) */
.msg-back-link{display:none}

/* ── Responsive overrides (Phase 1: mobile audit pass — 2026-04-28) ── */
@media (max-width: 992px){
    /* sidebars stop having side borders once stacked */
    .profile-data{border-right:none;padding:10px 0}
    .group-sidebar{border-right:none;border-left:none;padding-top:8px}
    /* messaging panes: drop the vertical divider when columns stack */
    .msg-list-pane{border-right:none!important;border-bottom:1px solid var(--border)}
    /* inbox on phone: hide the empty-state right pane (list takes full width) */
    .msg-shell-inbox .msg-thread-pane{display:none}
    /* thread on phone: hide the conversation list, show only the active thread */
    .msg-shell-thread .msg-list-pane{display:none}
    /* …and surface the back-link inside the thread header */
    .msg-shell-thread .msg-back-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-secondary);text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}
    .msg-shell-thread .msg-back-link:hover{background:var(--accent-dim);color:var(--accent)}
}

@media (max-width: 768px){
    /* let content breathe — no forced viewport height */
    .container{min-height:auto}

    /* fixed-pixel images become fluid */
    .welcome{padding-top:60px}
    .welcome img{width:100%;max-width:340px;height:auto}
    .welcome h1{font-size:26px}
    .login-img img,.sign-up-img img{width:55%!important}

    /* card heights become flexible */
    .post-card,.user-project-card,.project-card{height:auto;min-height:0}
    .post-card{padding-bottom:14px}
    .post-head{height:180px;line-height:180px}
    .post-head img{max-height:180px}

    /* project view: hero photo no longer locked to 620px */
    .project-photo{min-height:auto;max-height:none}
    .project-photo img{max-height:420px}
    .post-view-body img{max-width:100%}

    /* alerts and reset card widen */
    .reset-password{width:92%;padding:18px}
    .error-message,.success-message{width:92%;padding:14px;font-size:13px}

    /* footer flows in document instead of floating behind content */
    .footer{position:relative!important;z-index:auto}

    /* user/match cards: full width when stacked */
    .matched-user-card{width:100%}
    .user-card{width:100%;margin:5px 0 16px 0}

    /* chat bubbles: tighter avatar gutter */
    .chat-body .answer.left{padding:0 0 0 44px}
    .chat-body .answer.right{padding:0 44px 0 0}
    .chat-body .answer{max-width:100%}

    /* group profile chat box doesn't need to be 560px tall on a phone */
    .group-p-chat-box{height:auto;max-height:60vh;min-height:320px}
    .group-p-members-out{height:auto;max-height:380px}

    /* report forms / unblock pill — fit content, no float */
    .report-post-form button,.report-user-form button,.report-group-form button,.report-project-form button{width:100%}
    .unblock-unadmin-user{width:auto;float:none;display:inline-block;padding:6px 12px}

    /* image gallery thumbs scale */
    .post-attachments img{width:100px}

    /* office cover image cap */
    .office-cover img{max-height:160px}
}

/* ── Helpers extracted from inline template styles ──────────── */
.navbar-brand-arch,.navbar-brand-arch:hover,.navbar-brand-arch:focus{color:var(--accent);letter-spacing:2px;font-weight:700;font-size:15px}
.navbar-brand-arch span{color:var(--text-muted);transition:color .2s var(--ease)}
/* Hover: only ITECTENA shifts — to match ARCH's --accent. ARCH itself is
 * locked at --accent above (the parent rule pins it on hover/focus too,
 * defending against any inherited <a> hover from Bootstrap or theme code). */
.navbar-brand-arch:hover span{color:var(--accent)}
/* Messages badge — must stay inline with the Messages link, never wrap
 * onto a second line. inline-flex + nowrap on the link keeps both in a
 * single line on every screen size. */
.navbar .nav-link{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nav-msg-badge{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;white-space:nowrap;
  background:var(--accent);color:var(--bg-deep);
  font-size:10px;font-weight:700;line-height:1;
  min-width:18px;height:18px;padding:0 6px;
  border-radius:99px;
  margin-inline-start:4px;
}
.user-avatar-link{text-decoration:none;color:inherit}
.nav-logout{font-size:13px}
/* ── Toast-style messages stack ───────────────────────────────
 * Fixed below the navbar so messages don't push page content down.
 * Each .toast-msg fades in, auto-dismisses after 5 s, and adopts the
 * full glass treatment of one of the four Final 2026 modal kinds:
 *   .info     (default) → Info modal     — gold accent
 *   .success            → Success modal  — green
 *   .warning, .error,
 *   .danger             → Warning modal  — red/danger
 * Each variant gets the matching tinted gradient, hairline border in
 * the same hue, a soft top-corner radial halo (mirrors the modals'
 * ::before glow), and a circular icon medallion driven by the same
 * radial-halo CSS the .arch-modal-icon hero uses. */
.messages-stack{
  position:fixed;top:124px;left:50%;transform:translateX(-50%);
  z-index:1080;
  width:auto;max-width:520px;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
  padding:0 12px;
}
.messages-stack > *{pointer-events:auto}

.toast-msg{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  border-radius:var(--radius-md);
  font-size:13.5px;font-weight:500;color:var(--text-primary);
  min-width:280px;max-width:520px;
  /* Match the .arch-modal .modal-content surface exactly: stronger gold
   * tint fading to a near-solid neutral floor (no blue cast), and — like
   * the dark modals — NO backdrop blur, so the card reads as solid rather
   * than "lost between glass and solid". The blur moves to the light-theme
   * rule below, mirroring how the modals handle the two themes. */
  background:linear-gradient(180deg,rgba(205,161,44,.22) 0%,rgba(20,22,25,.92) 52%);
  border:1px solid rgba(205,161,44,.30);
  box-shadow:0 24px 60px rgba(0,0,0,.55),
             0 2px 8px rgba(0,0,0,.28),
             inset 0 1px 0 rgba(255,255,255,.08);
  animation:toast-in .26s var(--ease);
}
/* Soft radial halo near the top-start corner, the toast-sized cousin of
 * the modals' ::before glow. Sits behind the body content via z-index. */
.toast-msg::before{
  content:"";position:absolute;top:-60px;inset-inline-start:-20px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,161,44,.20) 0%,transparent 65%);
  pointer-events:none;z-index:0;
}
.toast-msg > *{position:relative;z-index:1}

[data-theme="light"] .toast-msg{
  /* Light theme mirrors the modal's light recipe — a 3-stop warm gradient
   * plus the glass blur the dark theme intentionally drops. */
  background:linear-gradient(160deg,rgba(205,161,44,.12) 0%,rgba(255,255,255,.85) 48%,rgba(255,252,240,.94) 100%);
  border-color:rgba(205,161,44,.26);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 24px 64px rgba(205,161,44,.14),0 4px 20px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.95);
}

/* success → Success modal (green) */
.toast-msg.success{
  background:linear-gradient(180deg,rgba(29,158,117,.13) 0%,rgba(20,22,25,.86) 50%);
  border-color:rgba(29,158,117,.28);
}
.toast-msg.success::before{
  background:radial-gradient(circle,rgba(29,158,117,.22) 0%,transparent 65%);
}
[data-theme="light"] .toast-msg.success{
  background:linear-gradient(160deg,rgba(29,158,117,.10) 0%,rgba(255,255,255,.80) 44%,rgba(240,255,249,.94) 100%);
  border-color:rgba(29,158,117,.22);
}

/* error / warning / danger → Warning modal (red/danger).
 * Bound together because Final 2026's modal taxonomy treats every
 * "something went wrong" signal under the single Warning kind. */
.toast-msg.error,
.toast-msg.danger,
.toast-msg.warning{
  background:linear-gradient(180deg,rgba(178,62,61,.26) 0%,rgba(20,22,25,.92) 52%);
  border-color:rgba(178,62,61,.38);
}
.toast-msg.error::before,
.toast-msg.danger::before,
.toast-msg.warning::before{
  background:radial-gradient(circle,rgba(178,62,61,.22) 0%,transparent 65%);
}
[data-theme="light"] .toast-msg.error,
[data-theme="light"] .toast-msg.danger,
[data-theme="light"] .toast-msg.warning{
  background:linear-gradient(160deg,rgba(192,65,63,.10) 0%,rgba(255,255,255,.80) 44%,rgba(248,244,244,.94) 100%);
  border-color:rgba(192,65,63,.22);
}

.toast-msg.is-leaving{animation:toast-out .22s var(--ease) forwards}

/* Icon medallion — same radial-halo recipe as .arch-modal-icon, sized
 * down for the toast. The <i class="toast-icon ..."> element becomes a
 * 34 px circle with the FA glyph centered inside. */
.toast-icon{
  flex-shrink:0;
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;
  background:radial-gradient(circle,rgba(205,161,44,.30),transparent 65%);
  color:var(--accent);
  filter:drop-shadow(0 2px 10px rgba(205,161,44,.35));
}
.toast-msg.success .toast-icon{
  background:radial-gradient(circle,rgba(29,158,117,.30),transparent 65%);
  color:var(--success);
  filter:drop-shadow(0 2px 10px rgba(29,158,117,.35));
}
.toast-msg.error .toast-icon,
.toast-msg.danger .toast-icon,
.toast-msg.warning .toast-icon{
  background:radial-gradient(circle,rgba(178,62,61,.30),transparent 65%);
  color:var(--danger);
  filter:drop-shadow(0 2px 10px rgba(178,62,61,.35));
}

.toast-body{flex:1;line-height:1.45;word-break:break-word}
.toast-close{
  background:transparent;border:1px solid transparent;
  color:var(--text-muted);
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.toast-close:hover{
  background:var(--overlay-soft);color:var(--text-primary);
  border-color:var(--overlay-strong);
}

@keyframes toast-in{
  from{opacity:0;transform:translateY(-8px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes toast-out{
  from{opacity:1;transform:translateY(0)}
  to  {opacity:0;transform:translateY(-8px)}
}

@media (max-width:640px){
  /* Toasts move to the bottom thumb-zone on phones, above the bottom nav + safe area. */
  .messages-stack{top:auto;bottom:calc(60px + env(safe-area-inset-bottom) + 12px);inset-inline:8px;transform:none;max-width:none}
}

/* ── Mobile bottom-sheet modals (Batch 4): pin to the bottom, rounded top,
 * slide up, scroll when tall. Applies to Bootstrap + arch-modals (.modal). ── */
@media (max-width:575.98px){
  .modal-dialog{margin:0;max-width:100%;position:fixed;inset-inline:0;bottom:0}
  .modal-dialog .modal-content{border-radius:18px 18px 0 0 !important;max-height:90dvh}
  .modal.fade .modal-dialog{transform:translateY(100%);transition:transform .25s ease-out}
  .modal.show .modal-dialog{transform:translateY(0)}
}

/* ── Language switcher (navbar pill) ─────────────────────────── */
.lang-switcher{margin:0}
.lang-toggle{background:transparent;color:var(--text-secondary);border:1px solid var(--border-hover);border-radius:var(--radius-sm);padding:6px 14px;font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .15s}
.lang-toggle:hover{color:var(--accent);border-color:rgba(255,199,60,.35);background:var(--accent-dim)}

/* ── RTL overrides (Arabic) ──────────────────────────────────── */
[dir="rtl"] body{font-family:'Tajawal','Poppins',sans-serif}
[dir="rtl"] .navbar-brand{letter-spacing:0}
/* mirror directional borders that separate sidebars */
[dir="rtl"] .profile-data{border-right:none;border-left:1px solid var(--border);text-align:right}
[dir="rtl"] .group-sidebar{border-right:none;border-left:1px solid var(--border)}
/* mirror text alignment of card bodies that lean left/right */
[dir="rtl"] .group-card,
[dir="rtl"] .project-footer,
[dir="rtl"] .files-name a,
[dir="rtl"] .report-post-form label,
[dir="rtl"] .report-user-form label,
[dir="rtl"] .report-group-form label,
[dir="rtl"] .report-project-form label{text-align:right}
[dir="rtl"] .report-post-form label,
[dir="rtl"] .report-user-form label,
[dir="rtl"] .report-group-form label,
[dir="rtl"] .report-project-form label{float:right}
/* user-avatar pill is fully circular now — RTL handled in the main block */
/* login/signup hero image floats to the leading side */
[dir="rtl"] .login-img img,
[dir="rtl"] .sign-up-img img{float:left}
/* office info icon spacing — flip the inline gap */
[dir="rtl"] .office-information i{margin-right:0;margin-left:5px}
[dir="rtl"] .office-information span{margin-right:0;margin-left:24px}
/* group/job card stat spacing */
[dir="rtl"] .job-card span{margin-right:0;margin-left:40px}
/* group member avatar gutter */
[dir="rtl"] .group-p-members img,
[dir="rtl"] .group-members img{margin-left:0;margin-right:10px}
[dir="rtl"] .group-p-members span{margin-left:0;margin-right:5px}
/* category labels float to leading side in RTL */
[dir="rtl"] .post-view-architecture-label,
[dir="rtl"] .post-view-books-label,
[dir="rtl"] .post-view-software-label,
[dir="rtl"] .post-view-learn-label{float:left;right:auto;left:-20px}
/* unblock-user pill: float to leading side */
[dir="rtl"] .unblock-unadmin-user{float:left}
/* chat bubbles — swap left/right so "their" stays on the leading edge */
[dir="rtl"] .chat-body .answer.left{padding:0 52px 0 0;text-align:right;float:right}
[dir="rtl"] .chat-body .answer.right{padding:0 0 0 52px;text-align:left;float:left}
[dir="rtl"] .chat-body .answer.left .avatar{left:auto;right:0}
[dir="rtl"] .chat-body .answer.right .avatar{right:auto;left:0}
[dir="rtl"] .chat-body .answer.left .text{border-radius:12px 4px 12px 12px}
[dir="rtl"] .chat-body .answer.right .text{border-radius:4px 12px 12px 12px}
[dir="rtl"] .chat-body .answer.left .text:before{left:auto;right:-28px;border-right-color:transparent;border-right-width:0;border-left-color:var(--bg-surface);border-left-width:10px}
[dir="rtl"] .chat-body .answer.right .text:before{right:auto;left:-28px;border-left-color:transparent;border-left-width:0;border-right-color:var(--accent-dim);border-right-width:10px}
[dir="rtl"] .chat-body .answer.left .time{padding-left:0;padding-right:10px}
[dir="rtl"] .chat-body .answer.right .time{padding-right:0;padding-left:10px}
[dir="rtl"] .chat-body .answer.is-announcement,[dir="rtl"] .chat-body .answer.is-announcement.left,[dir="rtl"] .chat-body .answer.is-announcement.right{float:none;padding:0;text-align:center}
/* sidebar reaction buttons — flip the hover slide direction */
[dir="rtl"] .project-like-form-container:hover,
[dir="rtl"] .project-dislike-form-container:hover,
[dir="rtl"] .project-views-counter:hover,
[dir="rtl"] .project-private-toggle:hover,
[dir="rtl"] .project-reports-counter:hover{transform:translateX(8px)}
/* messaging back-link arrow flips */
[dir="rtl"] .msg-back-link{transform:scaleX(-1)}
/* empty-state CTA gap stays mirrored automatically; just ensure body text aligns center */
[dir="rtl"] .empty-state-body{text-align:center}

@media (max-width: 480px){
    /* tighter navbar padding on phones */
    .navbar{padding:0 12px!important}

    /* form padding reduced on small phones */
    .user-signing-form,
    .post-creation-form,.edit-post-form,
    .add-project-form,.edit-project-form,
    .add-office-form,
    .group-creation-form,
    .job-form,
    .resume-user-personal-information-form,.resume-user-education-form,.resume-user-memberships-form,.resume-user-skills-form,.resume-user-career-form,.resume-user-hobbies-form{padding:14px}

    /* search empty-state image scales up so it's readable */
    .no-search-enter img{width:70%;margin-bottom:60px}

    /* welcome buttons stack */
    .welcome-buttons a{display:block;margin:8px auto;max-width:240px}

    /* office staff/manager cards full-width tap targets */
    .office-p-manager-card,.office-p-staff-card{padding:14px}

    /* project reactions on the sidebar — kill the hover-translate that wastes width */
    .project-like-form-container:hover,.project-dislike-form-container:hover,.project-views-counter:hover,.project-private-toggle:hover,.project-reports-counter:hover{transform:none}

    /* Group chat composer on narrow phones: equalised circular buttons
     * stay 36 px; textarea shrinks one line so the form fits a 320 px
     * viewport without wrapping. */
    .label-for-attachment,
    .poll-compose-btn,
    .composer-mic-btn,
    .group-p-add-message button[type=submit]{height:36px}
    .label-for-attachment,
    .poll-compose-btn,
    .composer-mic-btn{width:36px}
    .label-for-attachment i,
    .poll-compose-btn i,
    .composer-mic-btn i{font-size:13px}
    .group-p-add-message button[type=submit]{padding:0 14px;font-size:13px}
    .group-message-input{height:48px;font-size:13.5px}
}

/* ───────────────────────────────────────────────────────────────────
 * Site-wide responsive corrections — surfaces added in recent work
 * (cover picker, attachment dropzone, bookmark rows, topic cards,
 * posts filter row, project reactions strip, etc.) didn't all carry
 * mobile breakpoints. This block adds them in one place so future
 * mobile-pass audits start from a clean baseline.
 * ─────────────────────────────────────────────────────────────────── */

@media (max-width:640px){
  /* Bookmark rows — switch from horizontal "thumb | text" to a stacked
   * card so the title gets the whole row width. The thumb becomes a
   * full-width banner above. */
  .bm-row{grid-template-columns:1fr;grid-template-rows:auto auto}
  .bm-row-cover{width:100%;height:160px}
  .bm-row-cover-empty{height:120px}

  /* Project reactions strip — at 360px the like/dislike capsule + Files
   * + Comment buttons collide. Stack vertically and let the action
   * buttons span full width so each touch target is comfortably tappable. */
  .proj-reactions-card{flex-direction:column;align-items:stretch}
  .proj-reactions-card .proj-reactions-group{align-self:flex-start}
  .proj-react-secondary,.proj-react-cta{width:100%;margin-inline-start:0;justify-content:center}
}

@media (max-width:480px){
  .arch-cover-pick-actions{flex-direction:column;align-items:stretch}
  .arch-cover-pick-filename{order:3;text-align:center}

  /* Posts filter row — at 360px the Topics pill + Categories dropdown +
   * Sort + Friends-only chip + Clear + Make-a-post CTA needed ~700px
   * combined. Stack each control on its own row so phones get a clean
   * vertical filter strip. */
  .posts-filter-row{flex-direction:column;align-items:stretch}
  .posts-filter-row > *{width:100%}
  .posts-filter-row .posts-filter-sep{display:none}
  .posts-filter-topics,.posts-filter-friends,.posts-filter-clear{justify-content:center}
  .posts-filter-sort .search-filter-input{width:100%;min-width:0}
  .cat-dd,.cat-dd-button{width:100%;min-width:0}
  .cat-dd-button{justify-content:space-between}
  .arch-cta.ms-auto,.posts-make-cta.ms-auto{margin-inline-start:0!important}

  /* Topics grid — single column on phones; height becomes flexible so a
   * shorter blurb doesn't waste vertical space, longer blurbs aren't
   * clipped. min-height keeps the grid uniform-ish at edge cases. */
  .topics-grid{grid-template-columns:1fr}
  .topic-card{height:auto;min-height:140px}

  /* Existing-attachment chip filenames — the global 200px max-width was
   * wider than typical phone column widths. Tighter cap so chips don't
   * overflow their parent flex row. */
  .arch-attach-chip-name{max-width:140px}
}

/* ── Asking modal (4th modal kind) ──────────────────────────────────
 * Neutral, low-key — used when the modal is just gathering input
 * (vs Warning=red, Info=gold, Success=green). Pairs with the
 * arch-btn-ghost confirm button.  See feedback memory: term is
 * "modal" not "popup". */
.arch-modal-icon.is-neutral{
  background:radial-gradient(circle,rgba(138,147,166,.22),transparent 65%);
  color:var(--text-secondary);
  filter:drop-shadow(0 4px 14px rgba(138,147,166,.30));
}
.arch-modal-eyebrow.is-neutral{color:var(--text-secondary)}
.arch-modal .modal-content:has(.arch-modal-icon.is-neutral){
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,var(--bg-surface) 0%,var(--bg-card) 60%)!important;
  border:1px solid var(--border)!important;
}
[data-theme="light"] .arch-modal .modal-content:has(.arch-modal-icon.is-neutral){
  background:linear-gradient(180deg,var(--bg-surface) 0%,#ffffff 60%)!important;
}
.arch-modal .modal-content:has(.arch-modal-icon.is-neutral)::before{
  content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(138,147,166,.16) 0%,transparent 65%);
  pointer-events:none;
  z-index:0;
}


/* ════════════════════════════════════════════════════════════════
 * Info-glass register pages — Blocked / Muted / Warnings / Notifications
 * ────────────────────────────────────────────────────────────────
 * Four pages that share one shell anatomy, themed to three of the
 * four Final 2026 modal kinds:
 *   .blocked-page  → Warning kind  (red / is-danger)
 *   .muted-page    → Info kind     (gold accent — default)
 *   .warnings-page → Asking kind   (neutral / is-neutral)
 *   .notif-page    → Info kind     (gold accent — same family as muted)
 *
 * Each page shares the same shell anatomy (centered header with
 * eyebrow + title + medallion + subline · single-column list of rows ·
 * back-link footer pushed to the bottom of the shell). Only the color
 * tokens change per kind. Selectors stay verbose-by-page so each
 * template's HTML reads cleanly without coupling to a shared parent
 * class — extraction here is pure code organisation, no behavioural
 * change vs the inline <style> blocks the templates used to carry.
 * Sticky-footer reserve matches the 200px the site-wide .container
 * at line ~143 uses.
 * ════════════════════════════════════════════════════════════════ */

/* ── Blocked-users page (Warning kind — red/danger) ─────────────── */
.blocked-page{
  max-width:780px;margin:24px auto 32px;padding:0 16px;
  min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px);
  display:flex;flex-direction:column;
}
.blocked-page-shell{
  position:relative;overflow:hidden;
  padding:36px 28px 32px;
  border-radius:var(--r-lg, var(--radius-md));
  background:linear-gradient(180deg,rgba(178,62,61,.14) 0%,rgba(22,30,44,.86) 50%);
  border:1px solid rgba(178,62,61,.30);
  box-shadow:0 24px 60px rgba(0,0,0,.45),
             0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  flex:1;display:flex;flex-direction:column;
}
.blocked-page-shell::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:420px;height:420px;border-radius:50%;
  background:transparent;
  pointer-events:none;z-index:0;
}
.blocked-page-shell > *{position:relative;z-index:1}
[data-theme="light"] .blocked-page-shell{
  background:rgba(178,62,61,.08);
}

.blocked-page-head{text-align:center;margin:0 0 24px}
.blocked-page-eyebrow{
  margin:0 0 6px;font-size:11px;font-weight:700;color:var(--danger);
  text-transform:uppercase;letter-spacing:.14em;
}
.blocked-page-title{
  font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:700;
  color:var(--text-primary);margin:0 0 14px;letter-spacing:.01em;
}
.blocked-page-medallion{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(178,62,61,.15);
  color:var(--danger);font-size:28px;
  filter:drop-shadow(0 4px 16px rgba(178,62,61,.45));
  margin:0 auto 14px;
}
.blocked-page-sub{
  margin:0 auto;max-width:520px;
  color:var(--text-secondary);font-size:13.5px;line-height:1.6;
}

.block-toolbar{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin:0 0 18px;padding:12px 14px;
  background:rgba(178,62,61,.06);
  border:1px solid rgba(178,62,61,.22);
  border-radius:var(--radius-md);
}
.block-toolbar-import{display:inline-flex;margin:0}
.block-toolbar-bulk{margin:22px auto 0;max-width:520px;align-items:center}
.block-toolbar-hint{font-size:12px;color:var(--text-muted)}

/* Cap visible at ~8 rows (row ≈ 72px + 10px gap), then scroll. The
 * padding-inline-end leaves room for the scrollbar so it doesn't sit
 * on top of the row borders. Scrollbar tint matches the page theme. */
.block-list{
  display:flex;flex-direction:column;gap:10px;
  max-height:calc(8 * 72px + 7 * 10px);
  overflow-y:auto;
  padding-inline-end:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(178,62,61,.45) transparent;
}
.block-list::-webkit-scrollbar{width:8px}
.block-list::-webkit-scrollbar-track{background:transparent}
.block-list::-webkit-scrollbar-thumb{
  background:rgba(178,62,61,.35);border-radius:999px;
}
.block-list::-webkit-scrollbar-thumb:hover{background:rgba(178,62,61,.55)}
.block-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:rgba(22,30,44,.55);
  border:1px solid rgba(178,62,61,.20);
  border-radius:var(--radius-md);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.block-row:hover{
  border-color:rgba(178,62,61,.45);
  background:rgba(22,30,44,.70);
  box-shadow:0 6px 18px rgba(178,62,61,.16);
}
[data-theme="light"] .block-row{
  background:rgba(255,255,255,.65);
  border-color:rgba(178,62,61,.20);
}
[data-theme="light"] .block-row:hover{background:rgba(255,255,255,.85)}
.block-row-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(178,62,61,.15);
  color:var(--danger);font-size:18px;
  filter:drop-shadow(0 2px 8px rgba(178,62,61,.30));
}
.block-row-body{flex:1;min-width:0}
.block-row-name{font-size:14.5px;font-weight:700;color:var(--text-primary);margin:0 0 2px}
.block-row-meta{font-size:12px;color:var(--text-muted);margin:0}
.block-row-action{
  flex-shrink:0;display:inline-flex;gap:6px;align-items:center;
}
.block-row-action .btn{padding:7px 12px;font-size:12.5px}
.block-row-check{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;cursor:pointer;
}
.block-row-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--danger)}

.block-empty{text-align:center;padding:24px 8px}
.block-empty-icon{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(29,158,117,.15);
  color:var(--success);font-size:28px;
  filter:drop-shadow(0 4px 14px rgba(29,158,117,.35));
  margin:0 auto 12px;
}
.block-empty-title{font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 6px}
.block-empty-body{
  margin:0 auto;max-width:420px;font-size:13px;color:var(--text-muted);line-height:1.55;
}

.blocked-page-footer{
  text-align:center;margin-top:auto;padding-top:24px;
  border-top:1px solid rgba(178,62,61,.18);
}

@media (max-width:560px){
  .blocked-page{padding:0 10px;margin:14px auto 32px}
  .blocked-page-shell{padding:26px 16px 22px}
  .blocked-page-title{font-size:28px}
  .blocked-page-medallion{width:54px;height:54px;font-size:24px}
  .block-row{flex-wrap:wrap;gap:10px}
  .block-row-body{flex:1 1 100%;order:3}
  .block-row-action{flex:1 1 100%;order:4;display:flex;flex-wrap:wrap}
  .block-row-action form{flex:1 1 0;min-width:0}
  .block-row-action .btn{width:100%}
}

/* ── Muted-users page (Info kind — gold/accent) ──────────────────── */
.muted-page{
  max-width:780px;margin:24px auto 32px;padding:0 16px;
  min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px);
  display:flex;flex-direction:column;
}
.muted-page-shell{
  position:relative;overflow:hidden;
  padding:36px 28px 32px;
  border-radius:var(--r-lg, var(--radius-md));
  background:var(--bg-card);
  border:1px solid rgba(205,161,44,.30);
  box-shadow:0 24px 60px rgba(0,0,0,.45),
             0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  flex:1;display:flex;flex-direction:column;
}
.muted-page-shell::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:420px;height:420px;border-radius:50%;
  background:transparent;
  pointer-events:none;z-index:0;
}
.muted-page-shell > *{position:relative;z-index:1}
[data-theme="light"] .muted-page-shell{
  background:var(--bg-card);
}

.muted-page-head{text-align:center;margin:0 0 24px}
.muted-page-eyebrow{
  margin:0 0 6px;font-size:11px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.14em;
}
.muted-page-title{
  font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:700;
  color:var(--text-primary);margin:0 0 14px;letter-spacing:.01em;
}
.muted-page-medallion{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:28px;
  filter:drop-shadow(0 4px 16px rgba(205,161,44,.45));
  margin:0 auto 14px;
}
.muted-page-sub{
  margin:0 auto;max-width:560px;
  color:var(--text-secondary);font-size:13.5px;line-height:1.6;
}

.mute-list{
  display:flex;flex-direction:column;gap:10px;
  max-height:calc(8 * 72px + 7 * 10px);
  overflow-y:auto;
  padding-inline-end:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(205,161,44,.45) transparent;
}
.mute-list::-webkit-scrollbar{width:8px}
.mute-list::-webkit-scrollbar-track{background:transparent}
.mute-list::-webkit-scrollbar-thumb{
  background:rgba(205,161,44,.35);border-radius:999px;
}
.mute-list::-webkit-scrollbar-thumb:hover{background:rgba(205,161,44,.55)}
.mute-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:rgba(22,30,44,.55);
  border:1px solid rgba(205,161,44,.22);
  border-radius:var(--radius-md);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.mute-row:hover{
  border-color:rgba(205,161,44,.45);
  background:rgba(22,30,44,.70);
  box-shadow:0 6px 18px rgba(205,161,44,.16);
}
[data-theme="light"] .mute-row{
  background:rgba(255,255,255,.65);
  border-color:rgba(205,161,44,.22);
}
[data-theme="light"] .mute-row:hover{background:rgba(255,255,255,.85)}
.mute-row-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:18px;
  filter:drop-shadow(0 2px 8px rgba(205,161,44,.30));
}
.mute-row-body{flex:1;min-width:0}
.mute-row-name{font-size:14.5px;font-weight:700;color:var(--text-primary);margin:0 0 2px}
.mute-row-meta{font-size:12px;color:var(--text-muted);margin:0}
.mute-row-action{flex-shrink:0}
.mute-row-action .btn{padding:7px 14px;font-size:13px}

.mute-empty{text-align:center;padding:24px 8px}
.mute-empty-icon{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:28px;
  filter:drop-shadow(0 4px 14px rgba(205,161,44,.40));
  margin:0 auto 12px;
}
.mute-empty-title{font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 6px}
.mute-empty-body{
  margin:0 auto;max-width:440px;font-size:13px;color:var(--text-muted);line-height:1.55;
}

.muted-page-footer{
  text-align:center;margin-top:auto;padding-top:24px;
  border-top:1px solid rgba(205,161,44,.18);
}

@media (max-width:560px){
  .muted-page{padding:0 10px;margin:14px auto 32px}
  .muted-page-shell{padding:26px 16px 22px}
  .muted-page-title{font-size:28px}
  .muted-page-medallion{width:54px;height:54px;font-size:24px}
  .mute-row{flex-wrap:wrap;gap:10px}
  .mute-row-body{flex:1 1 100%;order:3}
  .mute-row-action{flex:1 1 100%;order:4}
  .mute-row-action .btn{width:100%}
}

/* ── My-warnings page (Asking kind — neutral) ────────────────────── */
.warnings-page{
  max-width:780px;margin:24px auto 32px;padding:0 16px;
  min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px);
  display:flex;flex-direction:column;
}
.warnings-page-shell{
  position:relative;overflow:hidden;
  padding:36px 28px 32px;
  border-radius:var(--r-lg, var(--radius-md));
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(0,0,0,.40),
             0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  flex:1;display:flex;flex-direction:column;
}
.warnings-page-shell::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:420px;height:420px;border-radius:50%;
  background:transparent;
  pointer-events:none;z-index:0;
}
.warnings-page-shell > *{position:relative;z-index:1}
[data-theme="light"] .warnings-page-shell{
  background:var(--bg-card);
}

.warnings-page-head{text-align:center;margin:0 0 24px}
.warnings-page-eyebrow{
  margin:0 0 6px;font-size:11px;font-weight:700;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.14em;
}
.warnings-page-title{
  font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:700;
  color:var(--text-primary);margin:0 0 14px;letter-spacing:.01em;
}
.warnings-page-medallion{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(138,147,166,.12);
  color:var(--text-secondary);font-size:28px;
  filter:drop-shadow(0 4px 16px rgba(138,147,166,.30));
  margin:0 auto 14px;
}
.warnings-page-sub{
  margin:0 auto;max-width:560px;
  color:var(--text-secondary);font-size:13.5px;line-height:1.6;
}

/* Warnings rows are taller (tier pill + meta + status chip + msg
 * line) — bump per-row reserve to ~96px so 8 rows still fit cleanly. */
.warning-list{
  display:flex;flex-direction:column;gap:10px;
  max-height:calc(8 * 96px + 7 * 10px);
  overflow-y:auto;
  padding-inline-end:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(138,147,166,.45) transparent;
}
.warning-list::-webkit-scrollbar{width:8px}
.warning-list::-webkit-scrollbar-track{background:transparent}
.warning-list::-webkit-scrollbar-thumb{
  background:rgba(138,147,166,.35);border-radius:999px;
}
.warning-list::-webkit-scrollbar-thumb:hover{background:rgba(138,147,166,.55)}
.warning-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 16px;
  background:rgba(22,30,44,.55);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.warning-row:hover{
  border-color:var(--border-hover);
  background:rgba(22,30,44,.70);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.warning-row.is-acked{opacity:.78}
[data-theme="light"] .warning-row{background:rgba(255,255,255,.65)}
[data-theme="light"] .warning-row:hover{background:rgba(255,255,255,.85)}
.warning-row-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(138,147,166,.12);
  color:var(--text-secondary);font-size:18px;
  filter:drop-shadow(0 2px 8px rgba(138,147,166,.25));
  margin-top:2px;
}
.warning-row-body{flex:1;min-width:0}
.warning-row-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 6px;
}
.warning-row-tier{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-primary);
  padding:3px 8px;border-radius:999px;
  background:rgba(138,147,166,.12);
  border:1px solid var(--border);
}
.warning-row-meta{font-size:12px;color:var(--text-muted)}
.warning-row-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
}
.warning-row-chip.is-ok{
  color:var(--success);background:rgba(29,158,117,.12);
  border:1px solid rgba(29,158,117,.30);
}
.warning-row-chip.is-pending{
  color:var(--accent);background:rgba(205,161,44,.12);
  border:1px solid rgba(205,161,44,.30);
}
.warning-row-msg{
  margin:0;font-size:13.5px;color:var(--text-secondary);line-height:1.55;
}
.warning-row-action{flex-shrink:0;align-self:center}
.warning-row-action .btn{padding:7px 14px;font-size:13px}

.warning-empty{text-align:center;padding:24px 8px}
.warning-empty-icon{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(29,158,117,.15);
  color:var(--success);font-size:28px;
  filter:drop-shadow(0 4px 14px rgba(29,158,117,.35));
  margin:0 auto 12px;
}
.warning-empty-title{font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 6px}
.warning-empty-body{
  margin:0 auto;max-width:420px;font-size:13px;color:var(--text-muted);line-height:1.55;
}

.warnings-page-footer{
  text-align:center;margin-top:auto;padding-top:24px;
  border-top:1px solid var(--border);
}

@media (max-width:560px){
  .warnings-page{padding:0 10px;margin:14px auto 0}
  .warnings-page-shell{padding:26px 16px 22px}
  .warnings-page-title{font-size:28px}
  .warnings-page-medallion{width:54px;height:54px;font-size:24px}
  .warning-row{flex-wrap:wrap;gap:10px}
  .warning-row-body{flex:1 1 100%;order:3}
  .warning-row-action{flex:1 1 100%;order:4}
  .warning-row-action .btn{width:100%}
}

/* ── Notifications page (Info kind — gold/accent, link-through rows) ─ */
.notif-page{
  max-width:780px;margin:24px auto 32px;padding:0 16px;
  min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px);
  display:flex;flex-direction:column;
}
.notif-page-shell{
  position:relative;overflow:hidden;
  padding:36px 28px 32px;
  border-radius:var(--r-lg, var(--radius-md));
  background:var(--bg-card);
  border:1px solid rgba(205,161,44,.30);
  box-shadow:0 24px 60px rgba(0,0,0,.45),
             0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  flex:1;display:flex;flex-direction:column;
}
.notif-page-shell::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:420px;height:420px;border-radius:50%;
  background:transparent;
  pointer-events:none;z-index:0;
}
.notif-page-shell > *{position:relative;z-index:1}
[data-theme="light"] .notif-page-shell{
  background:var(--bg-card);
}

.notif-page-head{text-align:center;margin:0 0 20px;position:relative}
.notif-settings-link{
  position:absolute;top:0;right:0;
  width:36px;height:36px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:16px;
  border:1px solid var(--border);
  transition:color .15s,border-color .15s,background .15s;
  text-decoration:none;
}
.notif-settings-link:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.notif-page-eyebrow{
  margin:0 0 6px;font-size:11px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.14em;
}
.notif-page-title{
  font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:700;
  color:var(--text-primary);margin:0 0 14px;letter-spacing:.01em;
}
.notif-page-medallion{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:28px;
  filter:drop-shadow(0 4px 16px rgba(205,161,44,.45));
  margin:0 auto 14px;
}
.notif-page-sub{
  margin:0 auto;max-width:560px;
  color:var(--text-secondary);font-size:13.5px;line-height:1.6;
}

/* Filter bar — chips left, action buttons pinned right in same row. */
.notif-filter-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid rgba(205,161,44,.18);
}
.notif-filter-actions{
  display:flex;align-items:center;gap:6px;
  margin-left:auto;flex-shrink:0;
}
.notif-action-icon-btn{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-muted);font-size:13px;
  cursor:pointer;text-decoration:none;
  transition:background .14s,border-color .14s,color .14s,transform .12s;
}
.notif-action-icon-btn:hover{
  background:rgba(205,161,44,.12);
  border-color:rgba(205,161,44,.45);
  color:var(--accent);
  transform:translateY(-1px);
  text-decoration:none;
}
[data-theme="light"] .notif-action-icon-btn{
  background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.12);
}
[data-theme="light"] .notif-action-icon-btn:hover{
  background:rgba(184,134,42,.10);border-color:rgba(184,134,42,.40);
}

/* Filter chips — pure links; active pill takes gold accent. Wraps on narrow
 * screens. localStorage-backed stickiness lives in script.js. */
.notif-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0;
}
.notif-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:var(--text-secondary);
  background:rgba(22,30,44,.45);
  border:1px solid var(--border);
  text-decoration:none;
  transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.notif-chip:hover{
  color:var(--text-primary);
  border-color:rgba(205,161,44,.45);
  background:rgba(22,30,44,.65);
  text-decoration:none;
  transform:translateY(-1px);
}
.notif-chip.is-active{
  color:var(--accent);
  background:rgba(205,161,44,.16);
  border-color:rgba(205,161,44,.55);
  box-shadow:0 4px 14px rgba(205,161,44,.18);
}
[data-theme="light"] .notif-chip{
  background:rgba(255,255,255,.65);
  color:#5a6275;
}
[data-theme="light"] .notif-chip:hover{
  background:rgba(255,255,255,.85);
  color:#1a2436;
  border-color:rgba(184,134,42,.45);
}
[data-theme="light"] .notif-chip.is-active{
  color:#9b6b1f;
  background:rgba(184,134,42,.16);
  border-color:rgba(184,134,42,.55);
}

/* Numeric unread count inside a filter chip. Gold fill, dark text. */
.notif-chip-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--accent);color:#1a2436;
  font-size:10px;font-weight:700;line-height:1;
  flex-shrink:0;
}
.notif-chip.is-active .notif-chip-badge{
  background:#fff;color:#9b6b1f;
}
[data-theme="light"] .notif-chip-badge{
  background:#b8862a;color:#fff;
}
[data-theme="light"] .notif-chip.is-active .notif-chip-badge{
  background:#1a2436;color:#fff;
}


.notif-list{
  display:flex;flex-direction:column;gap:10px;
  max-height:calc(8 * 72px + 7 * 10px);
  overflow-y:auto;
  padding:10px 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(205,161,44,.45) transparent;
}
.notif-list::-webkit-scrollbar{width:8px}
.notif-list::-webkit-scrollbar-track{background:transparent}
.notif-list::-webkit-scrollbar-thumb{
  background:rgba(205,161,44,.35);border-radius:999px;
}
.notif-list::-webkit-scrollbar-thumb:hover{background:rgba(205,161,44,.55)}

/* Wrapper around the notif-row link, so inline action chips can sit
 * beside the link without nesting <form> inside <a> (HTML-invalid).
 * Action chips fire AJAX and stay on this page; the link itself still
 * navigates with the existing mark-read flow. */
.notif-row-wrap{position:relative;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.notif-row-wrap .notif-row{margin-bottom:0}
.notif-row-actions{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;
  padding:0 8px;
}

/* ── Notification action menu — three-dots toggle + dropdown panel ─
 * Replaces the standalone chip row that used to sit under each
 * notification. The toggle pins to the row's top-right corner; the
 * dropdown drops down-right with a soft glass surface, gold accents
 * on hover. Same wrapper carries `data-popover-actions` so the
 * existing collapse-to-pill on success keeps working — when an
 * action fires successfully, the entire toggle + panel collapses
 * into a small status pill in the same slot. */
/* Bell row: menu sits inline at the row's right edge as a flex
 * sibling of the link, so toggle / pill / time all line up on a
 * single row band. (The dropdown panel inside it is body-portaled
 * on open so it doesn't get clipped by the popover's overflow.) */
.notif-actions-menu{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  padding:0 10px 0 4px;z-index:10;
}
/* Notifications-page row: keeps the absolute-positioned corner so
 * the page's wider rows don't squish their left content. */
.notif-row-wrap .notif-actions-menu{
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  padding:0;
}
/* Follow-back action: flow as a second row below the link, indented
 * to align with the body text (past the avatar). No absolute position. */
.notif-row-wrap .notif-actions-menu.notif-actions-inline{
  position:static;transform:none;
  padding:0 0 8px 72px;
  display:flex;align-items:center;
}
/* Only shift row right-padding when a three-dots toggle is present */
.notif-row-wrap:has(.notif-actions-menu:not(.notif-actions-inline)) .notif-row{
  padding-right:54px;
}
/* Bell dropdown: follow-back form flows below the item link, column layout,
 * indented to align with body text (16px pad + 36px avatar + 10px gap = 62px). */
.nav-popover-item-wrap:has(.notif-actions-inline){
  flex-direction:column;align-items:stretch;
}
.nav-popover-item-wrap .notif-actions-inline{
  position:static;transform:none;
  padding:0 16px 10px 62px;
  display:flex;align-items:center;
}
.notif-actions-toggle{
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
  color:var(--text-muted);
  font-size:11px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.notif-actions-toggle:hover{
  border-color:var(--accent);color:var(--accent);background:var(--accent-dim);
}
.notif-actions-toggle.is-open{
  border-color:var(--accent);color:var(--accent);background:var(--accent-dim);
  transform:scale(1.05);
}
.notif-actions-dropdown{
  /* JS sets position:fixed on open + computed top/right from the
   * toggle's viewport rect, so the panel escapes any scrollable
   * ancestor (the bell popover's nav-popover-list scrolls overflow,
   * and a normal absolute child would be clipped by it). The CSS
   * default below is the closed-state fallback for environments
   * without JS — it still renders below the toggle, just clipped. */
  position:fixed;
  min-width:200px;
  background:var(--bg-card);
  border:1px solid var(--border-hover);border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.38);
  padding:4px;display:flex;flex-direction:column;gap:1px;
  z-index:9999;
  /* Tiny enter animation — feels responsive without delaying intent. */
  animation:notif-actions-pop .14s var(--ease);
}
@keyframes notif-actions-pop{
  from{opacity:0;transform:translateY(-3px) scale(.98)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}
.notif-actions-dropdown form{margin:0}
.notif-actions-dropdown button{
  width:100%;
  display:flex;align-items:center;gap:9px;
  padding:8px 12px;
  background:transparent;border:0;
  color:var(--text-primary);font-size:12.5px;font-weight:500;
  border-radius:8px;text-align:start;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),padding-inline-start var(--dur-fast) var(--ease);
}
.notif-actions-dropdown button:hover{
  background:var(--accent-dim);
  padding-inline-start:14px;
}
.notif-actions-dropdown button i{
  font-size:11px;color:var(--accent);width:14px;flex-shrink:0;text-align:center;
}
/* Destructive-action variant — red text + red icon for the
 * Unfollow + Reject actions. Mute stays neutral since it's a soft
 * action. Reject is destructive (deletes the request + stamps a
 * 30-day cooldown), so it gets the same treatment as Unfollow. */
.notif-actions-dropdown form[data-action="unfollow"] button,
.notif-actions-dropdown form[data-action="reject_join"] button{color:#f87171}
.notif-actions-dropdown form[data-action="unfollow"] button i,
.notif-actions-dropdown form[data-action="reject_join"] button i{color:#f87171}
.notif-actions-dropdown form[data-action="unfollow"] button:hover,
.notif-actions-dropdown form[data-action="reject_join"] button:hover{background:rgba(178,62,61,.10)}
/* Archive button — hover-reveal, positioned at the right edge of each row */
.notif-archive-btn{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
  color:var(--text-muted);font-size:11px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.notif-row-wrap:hover .notif-archive-btn{opacity:1;pointer-events:auto}
.notif-archive-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.notif-archive-btn:disabled{opacity:.4;pointer-events:none}
.notif-row-wrap:has(.notif-actions-menu:not(.notif-actions-inline)) .notif-archive-btn{right:48px}
/* Archived page — always show the unarchive button (no hover needed) */
.notif-row-archived .notif-archive-btn{opacity:1;pointer-events:auto}
.notif-row-archived .notif-row{opacity:.75}
/* Mute button — mirrors archive button, sits left of it */
.notif-mute-btn{
  position:absolute;top:50%;right:38px;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
  color:var(--text-muted);font-size:11px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.notif-row-wrap:hover .notif-mute-btn{opacity:1;pointer-events:auto}
.notif-mute-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.notif-mute-btn:disabled{opacity:.4;pointer-events:none}
/* Active-mute state — amber accent to signal the verb is silenced */
.notif-mute-btn.is-muted{color:#f59e0b;border-color:#f59e0b;opacity:1;pointer-events:auto}
.notif-mute-btn.is-muted:hover{background:rgba(245,158,11,.12)}
/* Shift both action buttons right when the action menu is present */
.notif-row-wrap:has(.notif-actions-menu:not(.notif-actions-inline)) .notif-mute-btn{right:78px}
/* Brief confirmation flash when mute state toggles */
@keyframes notif-muted-flash{
  0%{background:rgba(245,158,11,.08)}
  50%{background:rgba(245,158,11,.18)}
  100%{background:transparent}
}
.notif-row-wrap.notif-muted-flash{animation:notif-muted-flash .6s var(--ease)}

/* Row is an <a> — whole row link-throughs to the target via the
 * mark_read view, which marks the notification read then redirects.
 * Unread state (.is-unread) gets a soft gold wash + a 6px dot. */
.notif-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;
  background:rgba(22,30,44,.55);
  border:1px solid rgba(205,161,44,.18);
  border-radius:var(--radius-md);
  text-decoration:none;color:inherit;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color .15s,box-shadow .15s,background .15s,transform .15s;
}
.notif-row:hover{
  border-color:rgba(205,161,44,.45);
  background:rgba(22,30,44,.74);
  box-shadow:0 6px 18px rgba(205,161,44,.16);
  transform:translateY(-1px);
  text-decoration:none;color:inherit;
}
.notif-row.is-unread{
  background:rgba(205,161,44,.10);
  border-color:rgba(205,161,44,.32);
}
[data-theme="light"] .notif-row{
  background:rgba(255,255,255,.65);
  border-color:rgba(184,134,42,.20);
}
[data-theme="light"] .notif-row:hover{background:rgba(255,255,255,.85)}
[data-theme="light"] .notif-row.is-unread{
  background:rgba(184,134,42,.10);
}

.notif-row-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  object-fit:cover;
  border:1px solid rgba(205,161,44,.22);
}
/* System rows (actor=None — moderation warnings, etc.) — same circular
 * footprint, gold-tinted glyph instead of a real avatar. */
.notif-row-avatar-system{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:18px;
  filter:drop-shadow(0 2px 8px rgba(205,161,44,.30));
}
.notif-row-avatar-reminder{
  background:rgba(139,92,246,.12);
  color:#a78bfa;
  filter:drop-shadow(0 2px 8px rgba(139,92,246,.25));
}
.notif-row-avatar-milestone{
  background:rgba(234,179,8,.12);
  color:#ca8a04;
  filter:drop-shadow(0 2px 8px rgba(234,179,8,.25));
}
.notif-reminder-icon{color:#a78bfa}

/* Grouped rows (e.g. "@alice and 49 others liked your post") — three
 * avatars overlap in a tight stack with a "+N" badge for the rest.
 * Width hugs the content so the body column starts at a predictable
 * place even when only one avatar is visible. */
.notif-row.is-grouped .notif-row-stack{
  display:inline-flex;align-items:center;flex-shrink:0;
  /* Stack width = 44 + (n-1) * 26 + optional "+N" badge — let flex sort
   * it; the negative left-margin on each child after the first creates
   * the overlap. */
}
.notif-row-avatar-stacked{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  object-fit:cover;
  border:2px solid var(--bg-card,#1c2331);
  background:var(--bg-card,#1c2331);
}
.notif-row-stack .notif-row-avatar-stacked + .notif-row-avatar-stacked{
  margin-inline-start:-12px;
}
.notif-row-stack-more{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  margin-inline-start:-12px;flex-shrink:0;
  font-size:11px;font-weight:800;color:var(--accent);
  background:rgba(205,161,44,.22);
  border:2px solid var(--bg-card,#1c2331);
}
[data-theme="light"] .notif-row-avatar-stacked{
  border-color:#ffffff;background:#ffffff;
}
[data-theme="light"] .notif-row-stack-more{
  border-color:#ffffff;
  background:rgba(184,134,42,.22);
  color:#9b6b1f;
}

/* ── @-mention pills ────────────────────────────────────────────────
 * Inline link rendered by the mentionify template filter wherever a
 * body contains @username. Sits inline inside paragraphs / list items
 * without breaking line-height; no underline (the gold accent + hover
 * lift carry enough affordance). RTL-safe: uses padding-inline instead
 * of left/right pairs.
 * ──────────────────────────────────────────────────────────────── */
.mention-pill{
  display:inline-block;
  padding:1px 7px;border-radius:999px;
  font-weight:600;font-size:.94em;line-height:1.4;
  color:var(--accent);
  background:rgba(205,161,44,.10);
  border:1px solid rgba(205,161,44,.28);
  text-decoration:none;
  transition:background .15s,border-color .15s,transform .12s;
}
.mention-pill:hover{
  background:rgba(205,161,44,.20);
  border-color:rgba(205,161,44,.55);
  color:var(--accent);
  text-decoration:none;
  transform:translateY(-1px);
}
[data-theme="light"] .mention-pill{
  color:#9b6b1f;
  background:rgba(184,134,42,.10);
  border-color:rgba(184,134,42,.30);
}
[data-theme="light"] .mention-pill:hover{
  background:rgba(184,134,42,.20);
  border-color:rgba(184,134,42,.55);
}
.notif-row-body{flex:1;min-width:0}
.notif-row-text{
  margin:0 0 2px;font-size:13.5px;line-height:1.5;color:var(--text-primary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.notif-row-text .actor{font-weight:700}
.notif-row-reason{
  font-size:12px;color:var(--text-muted);
  margin:0 0 2px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.notif-row-meta{font-size:11.5px;color:var(--text-muted);margin:0}
.notif-row-dot{
  width:8px;height:8px;border-radius:999px;flex-shrink:0;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(205,161,44,.18);
}
/* Status tags rendered inline inside the notif-row body, right below the
 * actor name. Replacing the old absolute-positioned pill that overlapped
 * the mute/archive icon buttons at the row's right edge. */
.notif-inline-tag{
  display:inline-flex;align-items:center;gap:5px;
  align-self:flex-start;
  padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:600;line-height:1.4;
  border:1px solid;white-space:nowrap;
  margin:2px 0 3px;
}
.notif-inline-tag--ok{color:var(--success);border-color:rgba(29,158,117,.35);background:rgba(29,158,117,.10)}
.notif-inline-tag--danger{color:#f87171;border-color:rgba(248,113,113,.35);background:rgba(178,62,61,.10)}
.notif-inline-tag i{font-size:10px}

.notif-empty{text-align:center;padding:24px 8px}
.notif-empty-icon{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:28px;
  filter:drop-shadow(0 4px 14px rgba(205,161,44,.40));
  margin:0 auto 12px;
}
.notif-empty-title{font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 6px}
.notif-empty-body{
  margin:0 auto;max-width:460px;font-size:13px;color:var(--text-muted);line-height:1.55;
}

.notif-pagination{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:18px 0 0;
}
.notif-pagination .btn{font-size:12.5px;padding:6px 12px}
.notif-pagination-status{font-size:12px;color:var(--text-muted)}

.notif-page-footer{
  text-align:center;margin-top:auto;padding-top:24px;
  border-top:1px solid rgba(205,161,44,.18);
}

/* ── Preferences matrix (6 × 3) ──────────────────────────────────
 * Two-axis grid: rows = categories, columns = channels. The header
 * row carries channel names; each cell is a toggle switch wired to
 * the AJAX endpoint via [data-pref-toggle] in script.js.
 * ──────────────────────────────────────────────────────────────── */
.pref-matrix{
  display:grid;
  /* First column hugs the longest label; the three channel columns
   * share the remaining width equally. */
  grid-template-columns:minmax(140px,1.5fr) repeat(3, minmax(80px,1fr));
  gap:8px 12px;
  margin:8px 0 18px;
  padding:14px 16px;
  background:rgba(22,30,44,.55);
  border:1px solid rgba(205,161,44,.20);
  border-radius:var(--radius-md);
}
.pref-matrix-head,
.pref-matrix-row{
  display:contents;
}
.pref-matrix-corner{
  /* Empty top-left intersection — keeps the grid honest. */
}
.pref-matrix-col-head{
  font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--text-muted);text-align:center;
  padding:6px 0;
  border-bottom:1px solid var(--border);
}
.pref-matrix-row-label{
  font-size:13.5px;font-weight:600;color:var(--text-primary);
  padding:10px 0;align-self:center;
}
[data-theme="light"] .pref-matrix{
  background:rgba(255,255,255,.65);
}

/* Toggle switch — 40 × 22 track, animated thumb. Wraps an actual
 * checkbox so keyboard / screen-reader behaviour is native. */
.pref-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 0;cursor:pointer;
  position:relative;
}
.pref-toggle-input{
  position:absolute;opacity:0;pointer-events:none;width:0;height:0;
}
.pref-toggle-track{
  width:40px;height:22px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--border);
  position:relative;
  transition:background .18s,border-color .18s;
}
.pref-toggle-thumb{
  position:absolute;top:2px;inset-inline-start:2px;
  width:16px;height:16px;border-radius:50%;
  background:var(--text-muted);
  transition:inset-inline-start .18s,background .18s,transform .18s;
}
.pref-toggle-input:checked + .pref-toggle-track{
  background:rgba(205,161,44,.32);
  border-color:rgba(205,161,44,.55);
}
.pref-toggle-input:checked + .pref-toggle-track .pref-toggle-thumb{
  inset-inline-start:20px;
  background:var(--accent);
}
.pref-toggle-input:focus-visible + .pref-toggle-track{
  box-shadow:0 0 0 3px rgba(205,161,44,.25);
}
.pref-toggle.is-saving .pref-toggle-track{
  /* Mid-flight visual state — the JS handler adds this class until the
   * AJAX comes back so a slow connection doesn't look frozen. */
  opacity:.55;
}
[data-theme="light"] .pref-toggle-track{
  background:rgba(0,0,0,.06);
}
[data-theme="light"] .pref-toggle-thumb{
  background:#7d869a;
}
[data-theme="light"] .pref-toggle-input:checked + .pref-toggle-track{
  background:rgba(184,134,42,.28);
  border-color:rgba(184,134,42,.55);
}
[data-theme="light"] .pref-toggle-input:checked + .pref-toggle-track .pref-toggle-thumb{
  background:#9b6b1f;
}

.pref-note{
  margin:6px 0 18px;padding:10px 14px;
  font-size:12.5px;color:var(--text-secondary);
  background:rgba(205,161,44,.06);
  border:1px solid rgba(205,161,44,.20);
  border-radius:var(--radius-sm);
  display:flex;align-items:flex-start;gap:8px;
}
.pref-note i{color:var(--accent);margin-top:2px}

/* ── Email cadence picker ─────────────────────────────────────── */
.pref-cadence{margin:12px 0 18px}
.pref-cadence-eyebrow{
  margin:0 0 8px;font-size:11px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.14em;
}
.pref-cadence-options{
  display:flex;flex-wrap:wrap;gap:8px;
}
.pref-cadence-option{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  font-size:12.5px;font-weight:600;
  color:var(--text-secondary);
  background:rgba(22,30,44,.55);
  border:1px solid var(--border);
  transition:background .15s,border-color .15s,color .15s;
}
.pref-cadence-option:hover{
  color:var(--text-primary);
  border-color:rgba(205,161,44,.45);
}
.pref-cadence-option.is-active{
  color:var(--accent);
  background:rgba(205,161,44,.16);
  border-color:rgba(205,161,44,.55);
}
.pref-cadence-input{
  position:absolute;opacity:0;pointer-events:none;width:0;height:0;
}
[data-theme="light"] .pref-cadence-option{
  background:rgba(255,255,255,.65);
  color:#5a6275;
}
[data-theme="light"] .pref-cadence-option.is-active{
  color:#9b6b1f;
  background:rgba(184,134,42,.16);
  border-color:rgba(184,134,42,.55);
}

/* ── Web Push prompt card (Step 9) ────────────────────────────────
 * Sits below the cadence picker. Hidden by default — push-init.js
 * unhides only when the browser supports push and the server
 * returned a non-empty VAPID public key.
 * ──────────────────────────────────────────────────────────────── */
.pref-push-card{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:18px 0 8px;padding:16px 18px;
  background:var(--bg-card);
  border:1px solid rgba(205,161,44,.32);
  border-radius:var(--radius-md);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.pref-push-icon{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);font-size:18px;
  filter:drop-shadow(0 2px 8px rgba(205,161,44,.30));
}
.pref-push-body{flex:1;min-width:200px}
.pref-push-title{
  margin:0 0 2px;font-family:'Space Grotesk','Poppins',sans-serif;
  font-size:14px;font-weight:700;color:var(--text-primary);
}
.pref-push-sub{margin:0;font-size:12.5px;color:var(--text-secondary);line-height:1.5}
.pref-push-btn{flex-shrink:0;font-size:13px;padding:8px 16px}
[data-theme="light"] .pref-push-card{
  background:var(--bg-card);
  border-color:rgba(184,134,42,.32);
}

@media (max-width:560px){
  .notif-page{padding:0 10px;margin:14px auto 32px}
  .notif-page-shell{padding:26px 16px 22px}
  .notif-page-title{font-size:28px}
  .notif-page-medallion{width:54px;height:54px;font-size:24px}
  .notif-row{gap:10px;padding:10px 12px}
  .notif-row-avatar{width:40px;height:40px}
  .notif-row-text{font-size:13px}
}

/* ════════════════════════════════════════════════════════════════
 * Report-modal confirm gate
 * ────────────────────────────────────────────────────────────────
 * Lives inside every report-form (post/project/job/user/group/office)
 * via templates/partials/report_confirm.html. Soft red wash that
 * extends the is-danger modal feel down into the form body, with a
 * required checkbox the global handler in script.js watches to keep
 * the submit button disabled until ticked.
 * ════════════════════════════════════════════════════════════════ */
.report-confirm{
  margin:14px 0 0;padding:12px 14px;
  background:rgba(178,62,61,.06);
  border:1px solid rgba(178,62,61,.30);
  border-radius:var(--radius-md);
}
.report-confirm-warn{
  display:flex;gap:8px;align-items:flex-start;
  margin:0 0 8px;
  font-size:12.5px;line-height:1.5;color:var(--text-secondary);
}
.report-confirm-warn i{color:var(--danger);font-size:14px;margin-top:2px;flex-shrink:0}
.report-confirm-warn-body{display:flex;flex-direction:column;gap:0;}
.report-confirm-warn-body .report-confirm-check{margin-top:10px;}
.report-confirm-note{
  display:flex;gap:8px;align-items:flex-start;
  margin:0 0 10px;padding:8px 10px;
  background:rgba(205,161,44,.08);
  border:1px solid rgba(205,161,44,.22);
  border-radius:var(--radius-sm);
  font-size:12px;line-height:1.5;color:var(--text-secondary);
}
.report-confirm-note i{color:var(--accent);font-size:13px;margin-top:2px;flex-shrink:0}
.report-confirm-check{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--text-primary);
  cursor:pointer;margin:0;
}
.report-confirm-check input[type="checkbox"]{
  width:16px;height:16px;cursor:pointer;
  accent-color:var(--danger);
  flex-shrink:0;
}
/* Make the disabled submit obvious so users see why the button won't
 * fire — pairs with the data-report-confirm gate in script.js. */
.report-confirm ~ .arch-modal-actions button[type=submit]:disabled,
form button[type=submit][disabled]{
  opacity:.55;cursor:not-allowed;
}

/* ── "You reported this" lock band ─────────────────────────────
 * Shown at the top of view_post / view_project / view_job /
 * view_group / view_office when the viewer has filed an open report
 * against the item. Body of the item still renders below (with links
 * stripped via the report_filters templatetag); this band is the
 * banner-level signal + the withdraw entry point. */
.reported-lock{
  display:flex;align-items:center;gap:14px;
  margin:14px auto 22px;max-width:1080px;
  padding:14px 18px;
  background:rgba(178,62,61,.08);
  border:1px solid rgba(178,62,61,.30);
  border-radius:var(--radius-md);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 10px 30px rgba(0,0,0,.25),
             inset 0 0 0 1px rgba(255,255,255,.04);
}
[data-theme="light"] .reported-lock{
  background:rgba(178,62,61,.06);
}
.reported-lock-icon{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(178,62,61,.15);
  color:var(--danger);font-size:18px;
  filter:drop-shadow(0 2px 10px rgba(178,62,61,.35));
}
.reported-lock-body{flex:1;min-width:0}
.reported-lock-eyebrow{
  margin:0 0 4px;font-size:11px;font-weight:700;color:var(--danger);
  text-transform:uppercase;letter-spacing:.10em;
}
.reported-lock-text{
  margin:0;font-size:13px;color:var(--text-secondary);line-height:1.5;
}
.reported-lock-action{flex-shrink:0}
.reported-lock-action .btn{padding:8px 16px;font-size:12.5px}
.reported-lock-action .btn.is-disabled{opacity:.65;cursor:not-allowed}

/* Drop-in muted treatment for elements that should look "locked" inside
 * a reported item (author card, tag pills, similar-posts CTA, etc.).
 * Reduces opacity, neutralises the cursor, and stops any inner <a>
 * from registering pointer events so the navigation truly can't fire.
 * Pair with markup that has already had its href stripped — this is
 * visual cue only, not a security boundary. */
.is-reported-muted{
  opacity:.55;
  filter:saturate(.55);
  cursor:not-allowed;
}
.is-reported-muted a,
.is-reported-muted button:not([data-toast-close]){
  pointer-events:none;
}
.is-reported-muted .post-author-link{cursor:default}
/* Disabled chip variant for non-button "send" stand-ins inside locked
 * composers (jobs view, etc.). Keeps the gold-CTA shape so the layout
 * doesn't shift, but reads as inert. */
.arch-cta.is-disabled,
[aria-disabled="true"].arch-cta{
  opacity:.55;cursor:not-allowed;pointer-events:none;
  filter:saturate(.55);
}
@media (max-width:560px){
  .reported-lock{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .reported-lock-action{flex:1 1 100%}
  .reported-lock-action .btn{width:100%}
}

/* ════════════════════════════════════════════════════════════════
   GROUPS PHASE B-D EXTRACTED STYLES (Step 31)
   Inline <style> blocks added across Steps 13-30 moved here in
   one pass. Templates lose their <style> blocks.
   ════════════════════════════════════════════════════════════════ */

/* Step 13 — invitation-row buttons */
.invite-row{align-items:center}
.invite-row-actions{display:flex;gap:8px;flex-shrink:0;margin-left:12px}
.invite-row-actions form{display:inline-flex}
@media(max-width:720px){
  .invite-row{flex-wrap:wrap}
  .invite-row-actions{margin-left:0;margin-top:8px;width:100%;justify-content:flex-end}
}

/* Step 17 — per-message admin state. Chips next to the username,
   tombstone replacement for deleted bodies, kebab dropdown trigger. */
.msg-state-chip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-start:6px;border-radius:99px;background:rgba(205,161,44,.18);color:var(--accent);font-size:9px}
.msg-state-chip.is-warning{background:rgba(178,62,61,.20);color:var(--danger)}
.answer.is-pinned{border-inline-start:3px solid var(--accent);padding-inline-start:8px}
.answer.is-hidden{opacity:.65;border-inline-start:3px dashed var(--danger);padding-inline-start:8px}
.answer.is-announcement{float:none;clear:both;max-width:100%;padding:0;margin:8px auto;text-align:center}
.answer.is-announcement .avatar{display:none}
.answer.is-announcement .name{display:block;margin-bottom:4px;font-size:12px;color:var(--accent);font-weight:600}
.answer.is-announcement .name::before{content:"\f0a1\00a0";font-family:"Font Awesome 6 Free";font-weight:900}
.answer.is-announcement .text{display:inline-block;max-width:680px;width:100%;background:rgba(205,161,44,.10);border:1px solid rgba(205,161,44,.28);border-top:2px solid var(--accent);color:var(--text-primary);border-radius:8px;text-align:start;white-space:pre-wrap;word-break:break-word}
.answer.is-announcement .text::before{display:none}
.answer.is-announcement .time{display:block;text-align:center;font-size:11px;color:var(--text-muted);margin-top:2px}
.answer.is-announcement .msg-hover-toolbar{position:static;display:flex;justify-content:center;opacity:0;transition:opacity .15s}
.answer.is-announcement:hover .msg-hover-toolbar{opacity:1}
/* Beat .chat-body .answer.left/right (0,3,0) so announcement is always full-width centered in LTR */
.chat-body .answer.is-announcement.left,
.chat-body .answer.is-announcement.right{float:none;clear:both;max-width:100%;padding:0;text-align:center}
.msg-tombstone{font-style:italic;color:var(--text-muted);background:rgba(255,255,255,.04);padding:6px 10px;border-radius:6px;font-size:12.5px}
.answer{position:relative}
.msg-admin-kebab{position:absolute;top:6px;inset-inline-end:6px;opacity:0;transition:opacity .15s}
.answer:hover .msg-admin-kebab,.msg-admin-kebab.show{opacity:1}
.msg-admin-kebab-btn{background:transparent;border:0;color:var(--text-muted);padding:2px 6px;border-radius:4px;cursor:pointer;font-size:13px}
.msg-admin-kebab-btn:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}

/* Step 18 — pinned-messages strip above the chat. */
.pin-strip{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:10px}
.pin-strip-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pin-strip-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.pin-strip-eyebrow i{margin-right:4px}
.pin-strip-count{font-size:10.5px;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);border-radius:99px;padding:1px 8px;font-weight:700}
.pin-strip-list{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:2px}
.pin-strip-card{flex:0 0 auto;max-width:240px;text-align:start;background:var(--bg-card);border:1px solid var(--border);border-inline-start:3px solid var(--accent);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--text-primary);font-family:inherit;display:flex;flex-direction:column;gap:2px;transition:border-color .15s,background .15s}
.pin-strip-card:hover{background:var(--bg-surface);border-color:rgba(205,161,44,.5)}
.pin-strip-card-author{font-size:11px;font-weight:700;color:var(--accent)}
.pin-strip-card-body{font-size:12px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}

/* ── Chat pin panel — dropdown from the hero thumbtack icon ── */
.chat-pin-panel{position:absolute;top:100%;left:0;right:0;z-index:30;background:rgba(22,30,44,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(205,161,44,.22);border-top:none;border-radius:0 0 14px 14px;transform-origin:top center;transform:scaleY(0.85);opacity:0;pointer-events:none;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .18s ease;overflow:hidden}
.chat-pin-panel.is-open{transform:scaleY(1);opacity:1;pointer-events:auto}
[data-theme="light"] .chat-pin-panel{background:rgba(255,255,255,.96);border-color:rgba(184,134,42,.28)}
.chat-pin-panel-head{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border)}
.chat-pin-panel-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.chat-pin-panel-count{font-size:10.5px;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);border-radius:99px;padding:1px 8px;font-weight:700}
.chat-pin-panel-close{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--text-muted);padding:4px 6px;border-radius:4px;line-height:1;font-size:13px;transition:color .15s,background .15s}
.chat-pin-panel-close:hover{color:var(--text-primary);background:var(--overlay-hover)}
.chat-pin-panel-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;padding:8px}
.chat-pin-panel-list .pin-strip-card{flex:none;max-width:none;width:100%}
.chat-pin-count{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;padding:0 4px;background:var(--accent);color:#fff;border-radius:8px;font-size:9px;font-weight:700;line-height:15px;text-align:center;pointer-events:none}

/* Role badges — pill with icon + label, tiered by colour */
.role-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px 2px 5px;border-radius:99px;
  background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.28);
  color:#a78bfa;
  font-size:10px;font-weight:700;letter-spacing:.025em;white-space:nowrap;
  vertical-align:middle;margin-inline-start:5px;line-height:1.2;
}
.role-badge i{font-size:8.5px;flex-shrink:0}
.member-row-mini .role-badge{padding:2px 3px;gap:2px;letter-spacing:0;margin-inline-start:3px;margin-inline-end:4px;flex:0 0 auto;max-width:fit-content}
.role-badge.is-mod{
  background:rgba(59,130,246,.13);border-color:rgba(59,130,246,.26);color:#60a5fa;
}
.answer.is-jump-flash{animation:pin-jump-flash 1.4s ease}
@keyframes pin-jump-flash{
  0%   {background:rgba(205,161,44,.30)}
  100% {background:transparent}
}

/* Step 20 — pending-requests page */
.batch-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:8px 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap}
.batch-toolbar-select-all{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);cursor:pointer;margin:0}
.batch-toolbar-select-all input{margin:0}
.batch-toolbar-spacer{flex:1 1 auto}
.pending-row{display:flex;align-items:center;gap:12px;cursor:pointer}
.pending-row-check{margin:0;flex-shrink:0}
.pending-row-quick{font-size:11px;padding:4px 10px;flex-shrink:0}
/* Two-button approve+reject group on the pending tab + register
 * page. Sit side-by-side, no wrap, fixed gap so they look like
 * one decisive control instead of two stray chips. */
.pending-row-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* Step 21 — member directory toolbar + audit-log row chips. */
.member-tabs{
  display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 12px;
  border-bottom:1px solid var(--border);
}
.member-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid transparent;border-bottom:none;
  border-top-left-radius:8px;border-top-right-radius:8px;
  font-size:13px;font-weight:600;color:var(--text-muted);
  text-decoration:none;background:transparent;
  margin-bottom:-1px;
}
.member-tab:hover{color:var(--text-primary);background:var(--bg-surface)}
.member-tab.is-active{
  color:var(--text-primary);
  background:var(--bg-card);
  border-color:var(--border);
  border-bottom:1px solid var(--bg-card);
}
.member-tab i{color:var(--text-muted);font-size:12.5px}
.member-tab.is-active i{color:var(--accent,#cda12c)}
.member-tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 6px;border-radius:999px;
  background:var(--bg-surface);border:1px solid var(--border);
  font-size:10.5px;font-weight:700;color:var(--text-muted);
}
.member-tab.is-active .member-tab-count{
  background:var(--accent-dim,rgba(205,161,44,.16));
  color:var(--accent,#cda12c);
  border-color:rgba(205,161,44,.45);
}
.member-tab-count.is-warn{
  background:rgba(205,161,44,.18);color:var(--accent,#cda12c);
  border-color:rgba(205,161,44,.45);
}
.member-tab-count.is-danger{
  background:rgba(178,62,61,.18);color:var(--danger,#ef4444);
  border-color:rgba(178,62,61,.45);
}
/* ── Member row + 3-dots quick-actions menu ───────────────────────
 * The row is a flex container with a clickable left-side link and a
 * sibling kebab. `min-width:0` on the body lets long usernames
 * truncate with ellipsis instead of forcing the kebab onto a second
 * row.
 */
.member-row{
  display:flex;align-items:center;gap:0;
  position:relative;
}
.member-row-link{
  display:flex;align-items:center;gap:14px;
  flex:1 1 auto;min-width:0;
  padding:12px 14px;
  text-decoration:none;color:inherit;
  border-radius:var(--radius-md);
}
.member-row-link:hover{background:rgba(205,161,44,.04)}
.member-row-body{flex:1 1 auto;min-width:0}
.member-row-text{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
  min-width:0;
}
.member-row-actor{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;flex:0 1 auto;max-width:100%;
}
.member-row-prof{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;flex:1 1 auto;
}
.member-row-meta{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.member-actions-menu{
  flex-shrink:0;
  display:inline-flex;align-items:center;
  padding-inline-end:10px;
  position:relative;
}
.member-actions-toggle{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
  color:var(--text-muted);
  font-size:12px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
}
.member-actions-toggle:hover,
.member-actions-toggle[aria-expanded="true"]{
  border-color:var(--accent,#cda12c);
  color:var(--accent,#cda12c);
  background:var(--accent-dim,rgba(205,161,44,.16));
}
.member-actions-toggle[aria-expanded="true"]{transform:scale(1.05)}
.member-actions-dropdown{
  position:absolute;top:calc(100% + 6px);
  inset-inline-end:6px;
  min-width:220px;
  background:var(--bg-card);
  border:1px solid var(--border-hover);border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.38);
  padding:4px;
  display:flex;flex-direction:column;gap:1px;
  z-index:30;
  animation:member-actions-pop .14s var(--ease,ease);
}
@keyframes member-actions-pop{
  from{opacity:0;transform:translateY(-3px) scale(.98)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}
.member-actions-dropdown form{margin:0}
.member-actions-dropdown button{
  width:100%;
  display:flex;align-items:center;gap:9px;
  padding:8px 12px;
  background:transparent;border:0;
  color:var(--text-primary);font-size:12.5px;font-weight:500;
  border-radius:8px;text-align:start;cursor:pointer;
  transition:background .15s,color .15s,padding-inline-start .15s;
}
.member-actions-dropdown button:hover{
  background:var(--accent-dim,rgba(205,161,44,.12));
  padding-inline-start:14px;
}
.member-actions-dropdown button i{
  font-size:11px;color:var(--accent,#cda12c);width:14px;flex-shrink:0;text-align:center;
}
.member-actions-dropdown button:disabled{opacity:.5;cursor:not-allowed}
.member-actions-divider{
  border:0;border-top:1px solid var(--border);margin:4px 6px;opacity:.7;
}
.member-actions-danger{color:#f87171 !important}
.member-actions-danger i{color:#f87171 !important}
.member-actions-danger:hover{background:rgba(178,62,61,.12) !important}

/* Sidebar (view_group) compact roster — flex-y-ifies the existing
 * .group-p-members row so the kebab can sit on the right while the
 * avatar+username stay clickable on the left. */
.member-row-mini{
  display:flex;align-items:center;gap:0;
  position:relative;padding-inline-end:0;
}
.member-row-mini-link{
  display:flex;align-items:center;gap:0;
  flex:1 1 auto;min-width:0;
  text-decoration:none;color:inherit;
}
.member-row-mini-link img{flex-shrink:0}
.member-row-mini-name{
  display:flex;align-items:center;gap:6px;
  flex:1 1 auto;min-width:0;font-size:13px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-inline-start:5px;
}
.member-row-mini .member-actions-menu{padding-inline-end:4px}
.member-row-mini .member-actions-toggle{width:26px;height:26px;font-size:11px}

/* Portal-mode dropdown — JS clones the panel into <body> and sets
 * position:fixed + top/left inline. We reset every positional inset
 * here so the inline-state's `inset-inline-end:6px` doesn't survive
 * the move and stretch the panel to viewport-width. `width:auto`
 * lets the panel shrink back to its content + min-width:220px. */
.member-actions-dropdown.is-portal{
  position:fixed;
  z-index:99999;
  inset:auto;
  width:auto;
  max-width:calc(100vw - 16px);
}

/* ── Sidebar Members panel ────────────────────────────────────────
 * Glassy card that holds the eyebrow / search / scrollable roster.
 * Backdrop blur + subtle accent border give it the same visual
 * weight as the omnibox / nav-popover panels elsewhere in the site.
 *
 * `--member-row-h` makes the 10-row max-height deterministic — bump
 * the variable and every subsequent rule reflows with it.
 */
.group-members-panel{
  --member-row-h: 56px;
  position:relative;
  background:rgba(22,30,44,.55);
  border:1px solid rgba(205,161,44,.20);
  border-radius:14px;
  padding:14px 14px 10px;
  margin:0 0 10px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
[data-theme="light"] .group-members-panel{
  background:rgba(255,255,255,.65);
  border-color:rgba(184,134,42,.30);
}
[data-theme="light"] .group-members-panel-search{
  background:rgba(0,0,0,.06);
  border-color:rgba(184,134,42,.25);
}
[data-theme="light"] .group-members-panel-search:focus-within{
  background:rgba(0,0,0,.09);
}
[data-theme="light"] .member-actions-toggle{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.15);
  color:var(--text-muted);
}
.group-members-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.group-members-panel-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent,#cda12c);
}
.group-members-panel-eyebrow i{font-size:11px}
.group-members-panel-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 7px;border-radius:999px;
  background:var(--accent-dim,rgba(205,161,44,.18));
  color:var(--accent,#cda12c);
  border:1px solid rgba(205,161,44,.45);
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
}
.group-members-panel-search{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;margin-bottom:10px;
  background:rgba(0,0,0,.20);
  border:1px solid var(--border);
  border-radius:999px;
  transition:border-color .15s,background .15s;
}
.group-members-panel-search:focus-within{
  border-color:rgba(205,161,44,.55);
  background:rgba(0,0,0,.30);
  box-shadow:0 0 0 3px rgba(205,161,44,.10);
}
.group-members-panel-search i{
  color:var(--text-muted);font-size:11px;flex-shrink:0;
}
.group-members-panel-search:focus-within i{color:var(--accent,#cda12c)}
.group-members-panel-search input{
  flex:1 1 auto;min-width:0;
  background:transparent;border:0;outline:none;
  color:var(--text-primary);font-size:12.5px;font-family:inherit;
}
.group-members-panel-search input::placeholder{
  color:var(--text-muted);opacity:.7;
}
.group-members-panel-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:calc(var(--member-row-h) * 6 + 6px * 5);
  overflow-y:auto;overflow-x:hidden;
  padding-inline-end:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(205,161,44,.45) transparent;
}
.group-members-panel-list::-webkit-scrollbar{width:6px}
.group-members-panel-list::-webkit-scrollbar-track{background:transparent}
.group-members-panel-list::-webkit-scrollbar-thumb{
  background:rgba(205,161,44,.35);border-radius:999px;
}
.group-members-panel-list::-webkit-scrollbar-thumb:hover{
  background:rgba(205,161,44,.55);
}
.group-members-panel-empty{
  margin:10px 0 0;padding:14px 12px;
  text-align:center;font-size:12px;color:var(--text-muted);
  background:rgba(0,0,0,.15);
  border:1px dashed var(--border);border-radius:10px;
}
.group-members-panel-empty i{color:var(--accent,#cda12c);margin-inline-end:6px}

/* Slim row variant inside the panel — overrides the older
 * .group-p-members box treatment so spacing matches the panel. */
.group-members-panel-list .member-row-mini{
  margin-bottom:0;
  padding:6px 8px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  border-radius:10px;
  transition:background .15s,border-color .15s,transform .15s;
}
.group-members-panel-list .member-row-mini:hover{
  background:rgba(205,161,44,.08);
  border-color:rgba(205,161,44,.30);
  transform:translateY(-1px);
}
.group-members-panel-list .member-row-mini-link img{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(205,161,44,.20);
  margin-inline-start:0;margin-inline-end:0;
}
.group-members-panel-list .member-row-mini-name{
  font-size:13px;color:var(--text-primary);font-weight:500;
  margin-inline-start:8px;
}
.member-row-mini-pending .member-row-mini-approve,
.member-row-mini-pending .member-row-mini-reject{
  font-size:11px;padding:3px 9px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:24px;
}
.member-row-mini-pending .member-row-mini-approve i,
.member-row-mini-pending .member-row-mini-reject i{font-size:11px}
/* Two-button approve+reject cluster on the view_group sidebar. */
.member-row-mini-actions{
  display:flex;align-items:center;gap:4px;flex-shrink:0;margin-inline-end:4px;
}

/* Compact-panel modifier — same glass shell, smaller header padding,
 * no max-height ceiling (admins/creator lists are inherently small). */
.group-members-panel--mini{
  padding:12px 14px 8px;
}
.group-members-panel--mini .group-members-panel-list:not(.group-members-panel-list--compact){
  max-height:none;
}
.group-members-panel--mini .group-members-panel-list--compact{
  max-height:calc(var(--member-row-h) * 3 + 6px * 2);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(205,161,44,.45) transparent;
}
.group-members-panel--mini .group-members-panel-list--compact::-webkit-scrollbar{width:4px}
.group-members-panel--mini .group-members-panel-list--compact::-webkit-scrollbar-track{background:transparent}
.group-members-panel--mini .group-members-panel-list--compact::-webkit-scrollbar-thumb{background:rgba(205,161,44,.45);border-radius:4px}

/* Owner — gold tier, crown icon */
.role-badge--owner{
  background:rgba(205,161,44,.16);border-color:rgba(205,161,44,.32);
  color:var(--accent);
}
.member-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;padding:10px 12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px}
.member-toolbar input,.member-toolbar select{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:6px 10px;font-size:12.5px;font-family:inherit}
.member-toolbar-search{flex:1 1 220px;min-width:160px}
.member-toolbar select{flex:0 0 auto}
.member-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.member-pager-info{font-size:12px;color:var(--text-muted)}
.audit-row{align-items:flex-start}
.audit-action-chip{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted)}
.audit-action-chip.audit-action-delete{background:rgba(178,62,61,.15);border-color:rgba(178,62,61,.3);color:var(--danger)}
.audit-action-chip.audit-action-warn{background:rgba(251,146,60,.15);border-color:rgba(251,146,60,.3);color:#fb923c}
.audit-action-chip.audit-action-edit{background:rgba(205,161,44,.15);border-color:rgba(205,161,44,.3);color:var(--accent)}
.audit-note{margin:4px 0 2px;font-size:13px;line-height:1.45;color:var(--text-primary)}
.audit-target{font-style:italic;color:var(--text-muted)}

/* Step 22 — report row chips. */
.report-row{align-items:center}
.report-cat-chip{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:99px;font-size:10.5px;font-weight:700;background:rgba(178,62,61,.12);border:1px solid rgba(178,62,61,.30);color:var(--danger)}
.report-row-note{margin:4px 0 2px;font-size:13px;line-height:1.45;color:var(--text-primary);font-style:italic}
.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
@media(max-width:720px){
  .report-row{flex-wrap:wrap}
  .report-row form,.report-row .is-disabled{margin-top:8px;width:100%}
}

/* Step 23 — "(edited)" badge appended to the time stamp. */
.msg-edited-badge{margin-inline-start:6px;font-size:10.5px;color:var(--text-muted);font-style:italic}

/* Step 24 — emoji reaction chips + quick-pick popover. */
.msg-reactions{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px;position:relative}
.msg-react-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;font-size:11px;font-family:inherit;transition:border-color .12s,background .12s}
.msg-react-chip:hover{background:var(--bg-card);border-color:var(--accent)}
.msg-react-chip.is-mine{background:rgba(205,161,44,.15);border-color:rgba(205,161,44,.45)}
.msg-react-emoji{font-size:13px;line-height:1}
.msg-react-count{font-size:10.5px;color:var(--text-muted);font-weight:700;font-variant-numeric:tabular-nums}
.msg-react-chip.is-mine .msg-react-count{color:var(--accent)}
.msg-react-add{display:inline-flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border-radius:99px;background:transparent;border:1px dashed var(--border);color:var(--text-muted);cursor:pointer;font-size:11px;opacity:0;transition:opacity .12s,color .12s,border-color .12s}
.answer:hover .msg-react-add,.msg-react-popover:not(:empty) ~ .msg-react-add{opacity:1}
.msg-react-add:hover{color:var(--accent);border-color:var(--accent)}
.msg-react-popover{display:flex;gap:2px;padding:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:99px;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:2147483647}
.msg-react-popover-btn{padding:3px 6px;border:0;background:transparent;cursor:pointer;font-size:16px;border-radius:99px;line-height:1}
.msg-react-popover-btn:hover{background:var(--bg-surface)}

/* Step 25 — reply / quote UI. */
.msg-reply-btn{position:absolute;top:6px;inset-inline-end:32px;background:transparent;border:0;color:var(--text-muted);padding:2px 6px;border-radius:4px;cursor:pointer;font-size:12px;opacity:0;transition:opacity .12s,color .12s}
.answer:hover .msg-reply-btn{opacity:1}
.msg-reply-btn:hover{background:rgba(255,255,255,.08);color:var(--accent)}
.msg-reply-snippet{display:flex;align-items:center;gap:6px;margin:4px 0;padding:4px 8px;background:rgba(255,255,255,.04);border-inline-start:2px solid var(--accent);border-radius:4px;cursor:pointer;font-family:inherit;font-size:11.5px;color:var(--text-muted);text-align:start;width:100%;border-top:0;border-right:0;border-bottom:0}
.msg-reply-snippet:hover{background:rgba(205,161,44,.10)}
.msg-reply-snippet i{font-size:10px;color:var(--accent);flex-shrink:0}
.msg-reply-snippet-author{font-weight:700;color:var(--accent);flex-shrink:0}
.msg-reply-snippet-body{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-reply-snippet-deleted{font-style:italic;color:var(--text-muted)}
.reply-context-strip{display:flex;align-items:center;gap:8px;padding:6px 12px;margin-bottom:6px;background:var(--bg-surface);border:1px solid var(--border);border-inline-start:3px solid var(--accent);border-radius:8px 8px 0 0;font-size:12px;color:var(--text-muted)}
.reply-context-strip i.fa-reply{color:var(--accent);font-size:11px}
.reply-context-label strong{color:var(--text-primary);font-weight:700;margin-inline-start:4px}
.reply-context-body{flex:1;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-style:italic}
.reply-context-clear{background:transparent;border:0;color:var(--text-muted);padding:2px 6px;border-radius:4px;cursor:pointer}
.reply-context-clear:hover{color:var(--danger);background:rgba(255,255,255,.06)}

/* Step 26 — thread side-panel + trigger buttons + footer pill. */
.msg-thread-btn{position:absolute;top:6px;inset-inline-end:58px;background:transparent;border:0;color:var(--text-muted);padding:2px 6px;border-radius:4px;cursor:pointer;font-size:12px;opacity:0;transition:opacity .12s,color .12s}
.answer:hover .msg-thread-btn{opacity:1}
.msg-thread-btn:hover{background:rgba(255,255,255,.08);color:var(--accent)}
.msg-thread-footer{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 10px;background:rgba(96,165,250,.10);border:1px solid rgba(96,165,250,.30);border-radius:99px;font-size:11px;font-weight:700;color:#60a5fa;cursor:pointer;font-family:inherit;transition:background .12s}
.msg-thread-footer:hover{background:rgba(96,165,250,.18)}
.msg-thread-footer i{font-size:10px}
.thread-panel{position:fixed;top:0;inset-inline-end:0;width:min(420px,90vw);height:100vh;height:100dvh;background:var(--bg-card);border-inline-start:1px solid var(--border);box-shadow:-12px 0 32px rgba(0,0,0,.35);z-index:1040;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease}
.thread-panel.is-open{transform:translateX(0)}
.thread-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.thread-panel-title{font-weight:700;color:var(--text-primary);font-size:14px}
.thread-panel-title i{color:var(--accent);margin-right:6px}
.thread-panel-close{background:transparent;border:0;color:var(--text-muted);padding:4px 8px;border-radius:4px;cursor:pointer}
.thread-panel-close:hover{background:rgba(255,255,255,.06);color:var(--text-primary)}
.thread-panel-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.thread-panel-loading{text-align:center;color:var(--text-muted);font-size:12.5px;padding:24px 0}
.thread-divider{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:8px 0}
.thread-divider::before,.thread-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.thread-bubble{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;background:var(--bg-surface);border:1px solid var(--border);max-width:100%}
.thread-bubble.is-thread-root{background:rgba(205,161,44,.06);border-color:rgba(205,161,44,.25)}
.thread-bubble.right{align-self:flex-end;background:rgba(96,165,250,.08);border-color:rgba(96,165,250,.25)}
.thread-bubble-author{font-size:11px;font-weight:700;color:var(--accent)}
.thread-bubble.right .thread-bubble-author{color:#60a5fa}
.thread-bubble-text{font-size:13px;color:var(--text-primary);word-break:break-word}
.thread-bubble-time{font-size:10.5px;color:var(--text-muted);margin-top:2px}
.thread-composer{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--border);background:var(--bg-surface)}
.thread-composer textarea{flex:1;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:6px 10px;font-family:inherit;font-size:12.5px;resize:none}
@media(max-width:560px){
  .thread-panel{width:100vw}
}

/* Step 27 — in-chat search drawer (slides from hero centre). */
.chat-search-toggle{background:transparent;border:1px solid rgba(205,161,44,.30);color:var(--text-muted);padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;transition:background .15s,color .15s,border-color .15s}
.chat-search-toggle:hover,.chat-search-toggle.is-active{background:rgba(205,161,44,.14);color:var(--accent);border-color:var(--accent)}
.chat-search-drawer{
  position:absolute;top:100%;left:15%;width:70%;z-index:20;
  background:rgba(22,30,44,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(205,161,44,.22);border-top:none;
  border-radius:0 0 14px 14px;
  padding:12px 16px 14px;
  transform-origin:top center;
  transform:scaleY(0.82);
  opacity:0;
  pointer-events:none;
  transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .18s ease;
}
.chat-search-drawer.is-open{transform:scaleY(1);opacity:1;pointer-events:auto}
[data-theme="light"] .chat-search-drawer{background:rgba(255,255,255,.94);border-color:rgba(184,134,42,.28)}
.chat-search-row{display:flex;align-items:center;gap:8px;padding:0 2px}
.chat-search-icon{color:var(--text-muted);font-size:13px}
.chat-search-input{flex:1;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:6px 10px;font-size:12.5px;font-family:inherit}
.chat-search-close{background:transparent;border:0;color:var(--text-muted);padding:4px 8px;border-radius:4px;cursor:pointer}
.chat-search-close:hover{background:rgba(255,255,255,.06);color:var(--text-primary)}
.chat-search-results{max-height:340px;overflow-y:auto;margin-top:8px}
.chat-search-empty{margin:0;padding:14px;text-align:center;color:var(--text-muted);font-size:12.5px}
.chat-search-hit{display:flex;gap:10px;align-items:flex-start;width:100%;padding:8px 10px;background:transparent;border:0;border-radius:8px;cursor:pointer;text-align:start;font-family:inherit;color:var(--text-primary)}
.chat-search-hit:hover{background:var(--bg-card)}
.chat-search-hit-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.chat-search-hit-body{flex:1;min-width:0}
.chat-search-hit-head{display:flex;justify-content:space-between;font-size:11.5px;margin:0 0 2px}
.chat-search-hit-author{font-weight:700;color:var(--accent)}
.chat-search-hit-time{color:var(--text-muted)}
.chat-search-hit-snippet{margin:0;font-size:12.5px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}
.chat-search-hit-snippet mark{background:rgba(205,161,44,.30);color:inherit;padding:0 2px;border-radius:2px}

/* Step 28 — gallery filter chips + grid + file cards. */
.gallery-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.gallery-filter-chip{padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);text-decoration:none;transition:background .12s,border-color .12s,color .12s}
.gallery-filter-chip:hover{background:var(--bg-surface);color:var(--text-primary);border-color:var(--text-muted)}
.gallery-filter-chip.is-active{background:rgba(205,161,44,.15);border-color:rgba(205,161,44,.45);color:var(--accent)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:18px}
.gallery-img-cell{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:8px;background:var(--bg-card);cursor:zoom-in}
.gallery-img-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s}
.gallery-img-cell:hover img{transform:scale(1.05)}
.gallery-img-caption{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font-size:10.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));font-weight:700}
.gallery-file-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text-primary);transition:border-color .12s,background .12s}
.gallery-file-card:hover{border-color:var(--accent);background:var(--bg-surface)}
.gallery-file-icon{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:42px;height:48px;flex-shrink:0;background:var(--bg-surface);border-radius:6px;color:var(--text-muted)}
.gallery-file-icon i{font-size:18px}
.gallery-file-ext{font-size:8.5px;font-weight:800;letter-spacing:.04em;margin-top:1px;color:var(--accent)}
.gallery-file-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.gallery-file-name{font-size:12px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery-file-sub{font-size:10.5px;color:var(--text-muted)}
@media(max-width:560px){
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* Step 29 — composer ergonomics + link-preview card. */
.group-p-chat-box.is-drag-hover{outline:2px dashed var(--accent);outline-offset:-4px;background:rgba(205,161,44,.06);transition:background .12s}
/* (Older .composer-mic-btn rules removed 2026-05-09 — superseded by
 * the unified composer styling earlier in this file, around line 3572.
 * Keeping this comment so a search for the class still lands here.) */
@keyframes mic-pulse{
  0%, 100% {box-shadow:0 0 0 0 rgba(178,62,61,.45)}
  50%      {box-shadow:0 0 0 6px rgba(178,62,61,0)}
}
.msg-link-preview{display:flex;gap:8px;align-items:flex-start;margin-top:6px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--border);border-inline-start:3px solid var(--accent);border-radius:8px;text-decoration:none;color:var(--text-primary);max-width:380px}
.msg-link-preview:hover{background:var(--bg-surface);border-color:var(--accent)}
.msg-link-preview-img{flex:0 0 56px;width:56px;height:56px;border-radius:6px;object-fit:cover;background:var(--bg-surface)}
.msg-link-preview-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.msg-link-preview-title{font-size:12.5px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;line-height:1.3}
.msg-link-preview-desc{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;line-height:1.4}
.msg-link-preview-host{font-size:10.5px;color:var(--accent);font-weight:600;letter-spacing:.02em}


/* view_group inline chat-image grid (legacy class names).
   Step 31 added .arch-att-grid + data-lightbox so the site-wide
   lightbox handler picks them up; the visual rules below stay
   keyed on .msg-img-* to avoid disturbing existing markup. */
.msg-img-grid{display:grid;gap:3px;margin-top:6px;max-width:320px;border-radius:10px;overflow:hidden}
.msg-img-grid[data-count="1"]{grid-template-columns:1fr}
.msg-img-grid[data-count="2"]{grid-template-columns:1fr 1fr}
.msg-img-grid[data-count="3"]{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.msg-img-grid[data-count="3"] .msg-img-cell:first-child{grid-row:span 2}
.msg-img-grid[data-count="4"],.msg-img-grid:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]){grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.msg-img-cell{position:relative;overflow:hidden;display:block;cursor:zoom-in}
.msg-img-cell img{width:100%;height:100%;object-fit:cover;display:block;min-height:90px;max-height:240px}
.msg-img-grid[data-count="1"] .msg-img-cell img{max-height:280px}
.msg-img-more::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55)}
.msg-img-more-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;z-index:2}
/* ── File attachment card (bubble-rendered) ── */
.msg-attach-file{
  display:flex;align-items:center;gap:10px;margin-top:8px;
  background:var(--bg-surface);border:1px solid var(--border);
  padding:8px 10px;border-radius:10px;text-decoration:none;
  color:var(--text-primary);font-size:12px;max-width:320px;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.msg-attach-file:hover{background:var(--bg-card);border-color:var(--accent)}
.msg-attach-icon{
  width:36px;height:36px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;background:var(--bg-card);color:var(--accent);
}
.att-ic-pdf    {background:#e74c3c1a;color:#e74c3c}
.att-ic-cad    {background:#2196f31a;color:#2196f3}
.att-ic-3d     {background:#4caf501a;color:#4caf50}
.att-ic-adobe  {background:#9c27b01a;color:#9c27b0}
.att-ic-archive{background:#ff98001a;color:#ff9800}
.att-ic-doc    {background:#1565c01a;color:#1565c0}
.att-ic-xls    {background:#2e7d321a;color:#2e7d32}
.att-ic-ppt    {background:#c628281a;color:#c62828}
.att-ic-audio  {background:#00bcd41a;color:#00bcd4}
.att-ic-video  {background:#f443361a;color:#f44336}
.msg-attach-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.msg-attach-name{font-size:12px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text-primary)}
.msg-attach-meta{font-size:10.5px;color:var(--text-muted)}
.msg-attach-dl{color:var(--text-muted);font-size:13px;flex-shrink:0}
.msg-attach-file:hover .msg-attach-dl{color:var(--accent)}
/* ── Pre-send attachment preview cards ── */
#attachPreviews{gap:8px;padding:4px 0}
.attach-pre-card{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-surface);border:1px solid var(--border);
  padding:6px 8px;border-radius:10px;max-width:240px;
}
.attach-pre-thumb{
  width:48px;height:48px;flex-shrink:0;border-radius:7px;overflow:hidden;
  background:var(--bg-card);display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.attach-pre-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.attach-pre-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.attach-pre-name{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.attach-pre-size{font-size:10px;color:var(--text-muted)}
.attach-pre-rm{
  background:none;border:none;padding:2px 5px;cursor:pointer;
  color:var(--text-muted);font-size:13px;line-height:1;flex-shrink:0;
  border-radius:4px;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.attach-pre-rm:hover{color:#e74c3c;background:#e74c3c1a}
.msg-audio-player{display:block;width:100%;max-width:340px;margin-top:8px;border-radius:8px;height:36px;accent-color:var(--accent)}
.msg-video-player{display:block;width:100%;max-width:420px;max-height:280px;margin-top:8px;border-radius:10px;background:#000;object-fit:contain}

/* ════════════════════════════════════════════════════════════════
   STEP 32 — canonical-button + canonical-modal sweep
   Replaces inline style="" attributes from groups.html / search_groups.html
   / view_group.html with reusable rules. Aligns with Tweeks #19 four-button
   palette + Tweeks #22 four-modal kinds.
   ════════════════════════════════════════════════════════════════ */

/* groups listing — full-width filter cell (was inline grid-column:span 6) */
.app-filter-cell.app-filter-cell-full{grid-column:1 / -1}

/* listing card — private lock icon + member-count chip */
.group-card-private-icon{font-size:11px;color:var(--text-muted);margin-inline-start:4px}
.group-card-member-count{font-size:11px;color:var(--text-muted);margin-inline-start:8px}

/* listing pagination row */
.groups-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:32px}
.groups-pager-info{color:var(--text-muted);font-size:13px}

/* search-results card — hover background swap (was inline onmouseover) */
.group-search-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.group-search-back{font-size:13px}
.group-search-card-link{text-decoration:none;color:inherit;display:block;height:100%}
.group-search-card{background:var(--bg-card);border:0;border-radius:14px;overflow:hidden;cursor:pointer;transition:background .2s}
.group-search-card:hover{background:var(--bg-surface)}
.group-search-card-img{width:100%;height:90px;object-fit:cover;display:block}
.group-search-card-fallback{width:100%;height:90px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-weight:700;font-size:32px;letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.group-search-card-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.group-search-card-desc{font-size:12px;color:var(--text-muted);height:48px;overflow:hidden;margin:0}

/* view_group sidebar — small button variant + modal-member link layout */
.group-sidebar-btn{font-size:12px}

/* Members + Gallery sidebar buttons — centred icon + label, with a
   small bell badge in the top-right corner when there are pending
   requests waiting for the mod+ viewer.

   `position:relative` on the button is what lets `.group-members-bell`
   absolute-position to its corner; centring is the default flow + a
   defensive `text-align:center`. */
.group-members-link,
.group-gallery-link{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;text-align:center;
  padding-inline:14px;          /* keep label clear of the bell badge */
}
.group-members-link i,
.group-gallery-link i{font-size:13px}
.group-members-bell{
  position:absolute;top:50%;
  inset-inline-end:8px;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:600;
  color:var(--accent,#cda12c);
  pointer-events:none;
}
.group-members-bell i{font-size:12px}
.group-members-bell-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 5px;border-radius:999px;
  background:var(--accent,#cda12c);color:#1a1a1a;
  font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.group-modal-member-link{text-decoration:none;display:inline-block;width:70%}
.unblock-unadmin-action{display:inline}
.unblock-unadmin-user{font-size:12px}

/* group-cover preview modal */
.group-cover-modal-body{padding:0}
.group-cover-modal-img{max-width:100%;display:block;margin:0 auto}
.group-cover-modal-fallback{height:300px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:120px;font-weight:700;letter-spacing:.04em;text-shadow:0 4px 16px rgba(0,0,0,.35)}

/* report-group modal — body + actions inside the canonical shell */
.group-modal-report-form{padding:0 22px 22px}
.group-modal-report-form .arch-modal-actions{margin-top:14px}

/* invite-members modal — search input + results pane */
.group-modal-invite-body{padding-bottom:20px}
.invite-search-results{min-height:80px}
.invite-row-cta{font-size:12px;padding:4px 12px}

/* Step 36 — Featured-groups rail at top of /groups/ listing.
   Editorial-promoted; sits ABOVE the Suggested rail on the
   unfiltered first page. Card carries a small star badge. */
.featured-rail{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.featured-rail-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:14px}
.featured-rail-eyebrow{font-size:12.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.featured-rail-eyebrow i{margin-right:4px}
.featured-rail-sub{font-size:11.5px;color:var(--text-muted)}
.featured-card{position:relative;border:1px solid rgba(205,161,44,.30);box-shadow:0 6px 18px rgba(205,161,44,.05);transition:transform .15s ease,box-shadow .15s ease}
.featured-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(205,161,44,.15)}
.featured-card-badge{position:absolute;top:10px;inset-inline-start:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(205,161,44,.92);color:#1a1a1a;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:99px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.featured-card-badge i{font-size:9px}

/* Step 35 — Suggested-groups rail at top of /groups/ listing.
   Renders only when no filters are active + user is on page 1.
   Card markup is the same .office-card shape; the rail-level wrap
   adds the eyebrow + a subtle border-bottom separator from the
   main grid below. */
.suggested-rail{margin-bottom:32px;padding-bottom:24px;border-bottom:1px dashed var(--border)}
.suggested-rail-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:14px}
.suggested-rail-eyebrow{font-size:12.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.suggested-rail-eyebrow i{margin-right:4px}
.suggested-rail-sub{font-size:11.5px;color:var(--text-muted)}
.suggested-card{position:relative;transition:transform .15s ease,box-shadow .15s ease}
.suggested-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* Step 34 — shareable invite-link sidebar panel. Sits in the owner
   action stack on view_group, between Invite members and Delete. */
.invite-link-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.invite-link-head{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.invite-link-head i{font-size:11px}
.invite-link-row{display:flex;gap:6px;align-items:stretch}
.invite-link-url{flex:1;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:6px 10px;font-size:11px;font-family:'Cascadia Code',Consolas,monospace;min-width:0}
.invite-link-copy{padding:6px 10px;font-size:12px;flex-shrink:0}
.invite-link-meta{margin:8px 0 6px;font-size:10.5px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.invite-link-meta i{font-size:9.5px}
.invite-link-actions{display:flex;gap:6px;margin-top:4px}
.invite-link-actions .btn{flex:1;font-size:11px;padding:4px 8px}
.invite-link-help{margin:0 0 8px;font-size:11.5px;color:var(--text-muted);line-height:1.4}
.invite-link-generate{font-size:12px;padding:6px 10px}

/* ════════════════════════════════════════════════════════════════
   UNIFIED arch-thread SHELL (Step 31 design skeleton)
   The cross-app callsite migration of messaging + view_job to a
   shared .arch-thread-* shell is documented but NOT applied today.
   Per Tweeks #20 lessons, that surface is high-risk and warrants
   per-app sessions under explicit go-ahead. The lightbox + att-grid
   primitives already exist (around line 5402); Step 31 added
   data-lightbox to view_group's chat thumbs so the existing handler
   picks them up without renaming. Subsequent migrations move the
   class itself rather than dual-tagging.
   ════════════════════════════════════════════════════════════════ */

/* ── Step 38 — group-export register badges + button row ────────── */
.export-action{margin:0 0 18px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.export-action-hint{margin:0;font-size:12px;color:var(--text-muted);line-height:1.45}
.export-list{margin-top:4px}
.export-row-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.export-status{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.export-status-pending{background:var(--bg-surface,#f3f4f6);color:var(--text-muted)}
.export-status-running{background:rgba(59,130,246,.12);color:#1d4ed8}
.export-status-done{background:rgba(16,185,129,.14);color:#047857}
.export-status-failed{background:rgba(244,63,94,.12);color:#b91c1c}
.export-status-expired{background:rgba(0,0,0,.06);color:var(--text-muted)}
.export-error{color:#b91c1c}

/* ── Step 39 — API token + docs surfaces ────────────────────────── */
.api-token-create{display:flex;gap:8px;align-items:flex-end;margin:0 0 18px;flex-wrap:wrap}
.api-token-label{display:flex;flex-direction:column;gap:4px;flex:1 1 220px;font-size:12px;color:var(--text-muted)}
.api-token-label input{height:36px;padding:6px 10px;border:1px solid var(--border-color,#dadbe2);border-radius:8px;background:var(--bg-surface,#fff);font-size:13px}
.api-token-list{margin-top:6px}
.api-token-row code{font-size:11px}
.api-docs-page{font-size:13px;line-height:1.5}
.api-docs-page h2{margin:18px 0 8px;font-size:15px}
.api-docs-page pre{background:var(--bg-surface,#f4f4f6);padding:10px;border-radius:8px;font-size:11.5px;overflow-x:auto}
.api-docs-page code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg-surface,#f4f4f6);padding:1px 4px;border-radius:4px}
.api-docs-page table{width:100%;border-collapse:collapse;margin:8px 0}
.api-docs-page th, .api-docs-page td{padding:6px 8px;border-bottom:1px solid var(--border-color,#e3e4ec);text-align:left;font-size:12px;vertical-align:top}
.api-docs-page th{font-weight:600;color:var(--text-muted)}

/* ── Site-wide back navigation link ────────────────────────────────
 * Plain accent-coloured text link; replaces ghost-button back links
 * everywhere so navigation affordances stay visually light. */
.back-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:500;
  color:var(--accent);text-decoration:none;
  transition:opacity .15s;
}
.back-link:hover{opacity:.75;color:var(--accent)}
.back-link i{font-size:11px}
/* UI-17 — "back" points right in RTL, so mirror the fixed left arrow on the
 * auth back-links (reset / resend / activation / settings) under [dir=rtl]. */
[dir="rtl"] .back-link .fa-arrow-left{transform:scaleX(-1)}

/* ── Site-wide back-to-top button ──────────────────────────────────
 * Floats lower-right; surface comes from the project's main_btn
 * (`.arch-cta`) so it shares the gold-on-dark vocabulary every other
 * primary button uses. This rule only overrides shape, position, and
 * the show/hide transition — colors, hover, and active states stay
 * inherited from .arch-cta. JS in base.html toggles .is-visible. */
.back-to-top.arch-cta{
  position:fixed;
  /* Lift above the bottom-edge — extra room on iOS safe-area devices. */
  right:max(20px, env(safe-area-inset-right, 20px));
  bottom:max(24px, env(safe-area-inset-bottom, 24px));
  width:46px;height:46px;padding:0;border-radius:50%;
  font-size:15px;
  /* Hidden by default; .is-visible fades + slides it into place. */
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease),background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .25s var(--ease);
  z-index:1090;
}
.back-to-top.arch-cta.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
/* Hover lift mirrors .arch-cta's -1px lift but keeps the visible
 * transform fixed so the show animation doesn't fight the hover. */
.back-to-top.arch-cta.is-visible:hover{transform:translateY(-2px)}
.back-to-top.arch-cta.is-visible:active{transform:translateY(0)}
[dir="rtl"] .back-to-top.arch-cta{
  right:auto;
  left:max(20px, env(safe-area-inset-left, 20px));
}

/* ── Site-wide pagination component ───────────────────────────────
 * Single source of truth — every paginated surface includes
 * templates/_pagination.html and gets this look. First / Prev /
 * page-window / Next / Last with the project's gold-on-dark
 * vocabulary, plus an aria-live status line below.
 *
 * Markup contract:
 *   <nav class="pager">
 *     <ul class="pager-list">
 *       <li><a class="pager-btn pager-btn-edge">…</a></li>     ← First/Prev/Next/Last
 *       <li><a class="pager-btn pager-btn-num">1</a></li>      ← number
 *       <li><span class="pager-btn ... is-current">2</span></li>← active
 *       <li><span class="pager-btn ... is-disabled">…</span></li> ← dead First/Prev
 *       <li><span class="pager-ellipsis">…</span></li>
 *     </ul>
 *     <p class="pager-status">Page X of Y</p>
 *   </nav>
 */
.pager{display:flex;flex-direction:column;align-items:center;gap:10px;margin:24px 0 8px}
.pager-list{
  display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px;list-style:none;padding:0;margin:0;
}
.pager-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border-radius:10px;
  background:var(--bg-card);
  color:var(--text-secondary);
  border:1px solid var(--border);
  font-size:13px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.pager-btn:hover{
  background:var(--accent-dim);
  color:var(--accent);
  border-color:rgba(205,161,44,.45);
  box-shadow:0 4px 10px rgba(205,161,44,.18);
  transform:translateY(-1px);
}
.pager-btn-edge{min-width:36px;padding:0 8px}
.pager-btn-edge i{font-size:11px}
.pager-btn-num{font-variant-numeric:tabular-nums}
.pager-btn.is-current{
  background:var(--accent);
  color:#1a1a1a;
  border-color:var(--accent);
  box-shadow:0 4px 12px rgba(205,161,44,.32);
  cursor:default;
}
.pager-btn.is-current:hover{transform:none}
.pager-btn.is-disabled,
.pager-btn[aria-disabled="true"]{
  opacity:.40;cursor:not-allowed;
  background:var(--bg-card);color:var(--text-muted);
  border-color:var(--border);box-shadow:none;
}
.pager-btn.is-disabled:hover{transform:none;background:var(--bg-card);color:var(--text-muted);border-color:var(--border);box-shadow:none}
.pager-ellipsis{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;color:var(--text-muted);
  letter-spacing:.05em;user-select:none;
}
.pager-status{
  margin:0;font-size:12px;color:var(--text-muted);
  letter-spacing:.02em;text-align:center;
}
/* RTL — chevrons flip via the icon classes themselves. The list is
 * already symmetric, so no further override needed. */
[dir="rtl"] .pager-btn-edge .fa-chevron-left,[dir="rtl"] .pager-btn-edge .fa-angles-left{transform:scaleX(-1)}
[dir="rtl"] .pager-btn-edge .fa-chevron-right,[dir="rtl"] .pager-btn-edge .fa-angles-right{transform:scaleX(-1)}
/* Light-theme: pull the chrome down a touch. */
[data-theme="light"] .pager-btn{
  background:#fff;border-color:#e8e1cd;color:#5a5550;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
[data-theme="light"] .pager-btn:hover{
  background:rgba(184,134,42,.08);color:var(--accent);border-color:rgba(184,134,42,.45);
}
[data-theme="light"] .pager-btn.is-current{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 4px 14px rgba(184,134,42,.38);
}
@media (max-width:540px){
  /* Compact pager on mobile — hide intermediate numbers, keep edges
   * + current + ellipses. The user can still scrub via prev/next. */
  .pager-btn-num:not(.is-current){display:none}
  .pager-ellipsis{display:none}
}

/* ── User search card ──────────────────────────────────────────────
 * Horizontal result row used on the global search surface (Users
 * section). Reads like a contact tile: avatar on the leading edge,
 * real name + @handle stacked, profession + nationality as muted
 * meta chips, chevron tail hinting "click to open profile". Hover
 * gets the same gold-tinted lift the other cards on the site use, so
 * the search results feel of-a-piece with project / job / office
 * cards rather than dropping back to a tiny avatar tile.
 */
.user-search-card{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  text-decoration:none;color:inherit;height:100%;
  transition:transform var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.user-search-card:hover{
  transform:translateY(-2px);
  border-color:rgba(205,161,44,.42);
  background:var(--bg-surface);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.user-search-card-avatar{
  position:relative;flex-shrink:0;
  width:56px;height:56px;border-radius:14px;overflow:hidden;
  background:var(--bg-surface);
  border:1px solid var(--border);
}
.user-search-card-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.user-search-card-body{flex:1;min-width:0}
.user-search-card-name{
  margin:0;font-size:14px;font-weight:600;color:var(--text-primary);
  letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-search-card:hover .user-search-card-name{color:var(--accent)}
.user-search-card-handle{
  margin:1px 0 0;font-size:11.5px;color:var(--text-muted);
  font-weight:500;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-search-card-meta{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:7px;
  font-size:11.5px;color:var(--text-muted);
}
.user-search-card-meta span{
  display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.user-search-card-meta i{color:var(--accent);font-size:10.5px}
.user-search-card-chev{
  flex-shrink:0;color:var(--text-muted);font-size:11px;
  transition:transform var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.user-search-card:hover .user-search-card-chev{color:var(--accent);transform:translateX(3px)}
[dir="rtl"] .user-search-card-chev{transform:scaleX(-1)}
[dir="rtl"] .user-search-card:hover .user-search-card-chev{transform:translateX(-3px) scaleX(-1)}
[data-theme="light"] .user-search-card{background:#fff;border-color:#e8e1cd;box-shadow:0 1px 3px rgba(0,0,0,.04)}
[data-theme="light"] .user-search-card:hover{
  background:rgba(0,0,0,.03);
  border-color:rgba(184,134,42,.45);
}

/* ── Global search — applied-filter chip strip ─────────────────────
 * Renders below the toolbar when at least one filter is active. Each
 * chip has a label + ✕ tail; clicking the chip drops just that one
 * filter (server-built remove_url). Same visual vocabulary as the
 * approved arch-btn-ghost (gold-tinted on hover) so it reads as a
 * removable "you can click me" surface, not a passive label.
 */
.search-applied-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:6px 0 18px;
}
.search-applied-label{
  font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
  margin-inline-end:2px;
}
.search-applied-chip{
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 10px 0 12px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:99px;
  color:var(--text-secondary);
  font-size:12px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.search-applied-chip:hover{
  background:var(--accent-dim);color:var(--accent);
  border-color:rgba(205,161,44,.45);
  box-shadow:0 3px 8px rgba(205,161,44,.18);
}
.search-applied-chip > i:first-child{color:var(--accent);font-size:10.5px}
.search-applied-chip span{
  max-width:240px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Specificity bump (.search-applied-chip .search-applied-x = 0,2,0)
 * is needed because the FontAwesome kit injects ``.fa-solid {display:
 * inline-block; line-height:1}`` AFTER style.css loads, and a single-
 * class selector here loses to FA's at equal specificity. The compound
 * selector lifts us above FA so the centring rules actually apply. */
.search-applied-chip .search-applied-x{
  /* `inline-block + line-height:height + text-align:center` is the
   * sturdy way to centre a FontAwesome glyph (rendered via ::before
   * as inline text) inside a fixed-size box — no flex contention with
   * FA's display:inline-block on .fa-solid. */
  display:inline-block;
  width:18px;height:18px;
  line-height:18px;
  text-align:center;
  vertical-align:middle;
  font-size:9.5px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  flex-shrink:0;
  margin-inline-start:2px;
  transition:background var(--dur-fast) var(--ease);
}
.search-applied-chip .search-applied-x::before{
  /* Inherit the parent's centring line-box. Stops FA from giving the
   * glyph its own line-height that would push it off-centre. */
  line-height:inherit;vertical-align:baseline;
}
.search-applied-chip:hover .search-applied-x{
  background:var(--accent);color:#1a1a1a;
}
[data-theme="light"] .search-applied-chip{background:#fff;border-color:#e8e1cd}
[data-theme="light"] .search-applied-x{background:rgba(0,0,0,.05)}

/* ── Global search — section header (count chip + see-all link) ────
 * Each result section opens with a header row that surfaces (a) the
 * total count for the type, so the user knows whether 6 of N are
 * shown, and (b) a "See all" link that hands off to the per-app
 * search surface (search_jobs / search_offices / etc.) preserving
 * the query, when there's more to see than fits on the first page.
 */
.search-section{margin-top:32px}
.search-section:first-of-type{margin-top:0}
.search-section-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:10px;flex-wrap:wrap;
}
.search-section-title{
  display:inline-flex;align-items:center;gap:10px;
  margin:0;
}
.search-section-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:22px;padding:0 8px;
  background:var(--accent-dim);
  color:var(--accent);
  border:1px solid rgba(205,161,44,.34);
  border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.search-section-seeall{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--text-muted);
  text-decoration:none;letter-spacing:.02em;
  transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.search-section-seeall:hover{color:var(--accent)}
.search-section-seeall:hover i{transform:translateX(3px)}
.search-section-seeall i{
  font-size:10.5px;
  transition:transform var(--dur-fast) var(--ease);
}
[dir="rtl"] .search-section-seeall i{transform:scaleX(-1)}
[dir="rtl"] .search-section-seeall:hover i{transform:translateX(-3px) scaleX(-1)}

/* ── Global search — combined empty-types panel ────────────────────
 * One card listing every type the user *asked* for but where nothing
 * matched. Lives at the bottom of the result stack as a soft hint
 * rather than a screaming empty-state — the page already has hits in
 * other types above it.
 */
.search-empty-types{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:32px;padding:18px 22px;
  background:var(--bg-card);
  border:1px dashed var(--border);
  border-radius:14px;
  color:var(--text-secondary);
}
.search-empty-types-icon{
  font-size:22px;color:var(--text-muted);flex-shrink:0;
}
.search-empty-types-body{flex:1;min-width:0}
.search-empty-types-title{
  margin:0 0 3px;font-size:13px;font-weight:600;color:var(--text-primary);
  letter-spacing:.01em;
}
.search-empty-types-list{
  margin:0;font-size:12px;color:var(--text-muted);letter-spacing:.02em;
}
.search-empty-types-cta{flex-shrink:0}
[data-theme="light"] .search-empty-types{background:#fff;border-color:#e8e1cd}

/* ── Global search — filter panel subsection heading ───────────────
 * Small uppercase label that breaks the (now long) filter panel into
 * scannable chunks: Universal · Posts · Projects · Jobs · Groups ·
 * Offices · Users. Sits between successive .app-filters-grid blocks
 * inside the same .app-filters-panel. Gold-tinted icon to match the
 * rest of the toolbar's accent vocabulary.
 */
.search-filters-subhead{
  display:flex;align-items:center;gap:8px;
  margin:18px 0 10px;
  font-size:11px;font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.08em;
  padding-top:14px;
  border-top:1px dashed var(--border);
}
.search-filters-subhead:first-of-type{
  margin-top:6px;padding-top:0;border-top:none;
}
.search-filters-subhead i{color:var(--accent);font-size:12px}

/* ── Global search — range input pair (year / salary) ──────────────
 * Two number inputs separated by an em-dash. Visually feels like one
 * widget so the user reads "from–to" naturally. Inputs share the
 * same height and styling as the panel's <select>s for vertical
 * rhythm.
 */
.search-range-row{
  display:flex;align-items:center;gap:8px;
}
.search-range-row input[type="number"]{
  flex:1;min-width:0;
  height:36px;padding:0 10px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.search-range-row input[type="number"]:focus{
  outline:none;border-color:rgba(205,161,44,.55);
  box-shadow:0 0 0 3px rgba(205,161,44,.18);
}
.search-range-sep{
  color:var(--text-muted);font-size:14px;
  font-weight:600;letter-spacing:.04em;
}
[data-theme="light"] .search-range-row input[type="number"]{background:#fff;border-color:#e8e1cd}

/* ── Global search — Top results rollup ───────────────────────────
 * Cross-type "best 6" rollup that sits above the per-type sections.
 * Each card shows a thumbnail (cover/avatar) with a small type-icon
 * badge in the corner, then the result title + a one-line subtitle.
 * Hover gets the same gold-tinted lift the other cards use so it
 * feels of-a-piece with project / office / user-search cards.
 */
.search-top-section{margin-bottom:32px}
.search-top-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.search-top-card{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  text-decoration:none;color:inherit;
  transition:transform var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.search-top-card:hover{
  transform:translateY(-2px);
  border-color:rgba(205,161,44,.42);
  background:var(--bg-surface);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.search-top-thumb{
  position:relative;flex-shrink:0;
  width:48px;height:48px;border-radius:10px;overflow:hidden;
  background:var(--bg-surface);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:18px;
}
.search-top-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-top-typebadge{
  position:absolute;
  bottom:-3px;inset-inline-end:-3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent);color:#1a1a1a;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:8px;
  border:2px solid var(--bg-card);
}
.search-top-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.search-top-title{
  font-size:13px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.01em;
}
.search-top-card:hover .search-top-title{color:var(--accent)}
.search-top-sub{
  font-size:11.5px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
[data-theme="light"] .search-top-card{background:#fff;border-color:#e8e1cd;box-shadow:0 1px 3px rgba(0,0,0,.04)}

/* ── Unified search-hit row ───────────────────────────────────────
 * One row per result, full container width, four data points: cover,
 * title, description, owner+subtitle. Replaces the prior per-app
 * `_search_card.html` cards on /search/ — same hover language as
 * `.search-top-card` but stretched to a horizontal row with room for
 * a 2-line description. Sections stack rows directly (no Bootstrap
 * grid wrapper).
 */
.search-hit{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 16px;margin-bottom:10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  text-decoration:none;color:inherit;
  transition:transform var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             background var(--dur-mid) var(--ease);
}
.search-hit:hover,
.search-hit:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(205,161,44,.42);
  background:var(--bg-surface);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.search-hit:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(205,161,44,.25),0 8px 18px rgba(0,0,0,.16);
}
.search-hit-thumb{
  position:relative;flex-shrink:0;
  width:80px;height:80px;border-radius:10px;overflow:hidden;
  background:var(--bg-surface);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:24px;
}
.search-hit-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-hit-typebadge{
  position:absolute;bottom:-4px;inset-inline-end:-4px;
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#1a1a1a;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;
  border:2px solid var(--bg-card);
}
.search-hit-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.search-hit-row1{display:flex;align-items:baseline;gap:10px;min-width:0}
.search-hit-title{
  flex:1;min-width:0;
  font-size:14.5px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.005em;
}
.search-hit-typelabel{
  font-size:10px;font-weight:700;color:var(--accent);
  letter-spacing:.06em;text-transform:uppercase;
  flex-shrink:0;
}
.search-hit-desc{
  font-size:12.5px;color:var(--text-secondary);
  margin:0;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
/* "matched in <Field>: …snippet…" callout. Dim pill for the label so
 * it reads as metadata, brighter snippet so the highlighted query
 * term still pops. Single-line clamp; the description above already
 * gives 2 lines of context. */
.search-hit-match{
  display:flex;align-items:baseline;gap:8px;
  font-size:11.5px;line-height:1.45;
  margin:0;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;
}
.search-hit-match-label{
  flex-shrink:0;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-dim);
  padding:1px 7px;border-radius:99px;
}
.search-hit-match-snippet{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text-secondary);
}
.search-hit-meta{
  font-size:11.5px;color:var(--text-muted);
  margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.search-hit-meta i{font-size:10.5px;color:var(--text-muted)}
.search-hit-dot{opacity:.55;font-weight:700}
.search-hit-owner{
  display:inline-flex;align-items:center;gap:5px;
  max-width:240px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-hit-sub{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:240px;
}
[data-theme="light"] .search-hit{background:#fff;border-color:#e8e1cd;box-shadow:0 1px 3px rgba(0,0,0,.04)}
[data-theme="light"] .search-hit-typebadge{border-color:#fff}
@media (max-width: 640px){
  .search-hit{padding:12px 12px;gap:11px}
  .search-hit-thumb{width:64px;height:64px;font-size:20px}
  .search-hit-title{font-size:13.5px}
  .search-hit-desc{-webkit-line-clamp:3}
}

/* ── Search empty-state — "Did you mean" suggestion line ──────────
 * Sits between the "No results" headline and the body hint. The
 * suggested term is bold + underlined-on-hover so it reads as the
 * one-click fix.
 */
.search-empty-suggestion{
  margin:0 0 12px;
  font-size:14px;color:var(--text-secondary);
}
.search-empty-suggestion a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px dashed transparent;
  transition:border-color var(--dur-fast) var(--ease);
}
.search-empty-suggestion a:hover{border-bottom-color:var(--accent)}
.search-empty-suggestion strong{font-weight:700;letter-spacing:.005em}

/* zero-results fallback — broadened query + CTA row */
.se-suggestions{margin:0 0 14px;display:flex;flex-direction:column;align-items:center;gap:4px}
.se-actions{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 28px;
}
.se-action-btn{font-size:12px}

/* zero-results trending posts strip */
.se-trending{width:100%;max-width:600px;margin-top:8px;text-align:left}
.se-trending-label{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);margin:0 0 10px;
  display:flex;align-items:center;gap:6px;
}
.se-trending-label i{color:var(--accent)}
.se-trending-cards{display:flex;flex-direction:column;gap:8px}
.se-trending-card{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:10px;
  padding:8px 12px;text-decoration:none;transition:border-color var(--dur-fast) var(--ease);
}
.se-trending-card:hover{border-color:var(--accent)}
.se-trending-thumb{
  width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0;
}
.se-trending-thumb--blank{background:var(--border)}
.se-trending-meta{flex:1;min-width:0}
.se-trending-title{
  margin:0 0 2px;font-size:13px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.se-trending-author{margin:0;font-size:11.5px;color:var(--text-muted)}
[data-theme="light"] .se-trending-card{background:#fff;border-color:#e8e1cd}

/* ── Search syntax help — toolbar (?) + modal list ─────────────────
 * Tiny help button tucked at the right edge of the toolbar row.
 * Opens a modal listing the operators the backend already accepts.
 */
.search-help-btn{
  flex-shrink:0;
  width:38px;height:38px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text-muted);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.search-help-btn:hover{
  background:var(--accent-dim);
  color:var(--accent);
  border-color:rgba(205,161,44,.45);
}
.search-help-list{
  display:flex;flex-direction:column;gap:8px;
}
.search-help-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:10px 12px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:13px;
}
.search-help-row code{
  flex-shrink:0;
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:6px;
  background:rgba(205,161,44,.12);
  color:var(--accent);
  border:1px solid rgba(205,161,44,.32);
  font-family:'SF Mono', ui-monospace, monospace;
  font-size:12px;font-weight:600;
  white-space:nowrap;
  min-width:160px;
}
.search-help-row span{
  flex:1;min-width:0;
  color:var(--text-secondary);line-height:1.55;
}
[data-theme="light"] .search-help-row{background:#fff;border-color:#e8e1cd}
[data-theme="light"] .search-help-row code{background:rgba(184,134,42,.12);border-color:rgba(184,134,42,.35);color:var(--accent)}
@media (max-width:540px){
  .search-help-row{flex-direction:column;gap:6px}
  .search-help-row code{min-width:0;align-self:flex-start}
}

/* ── A11y — skip link ─────────────────────────────────────────────
 * Visually hidden until focused via Tab. The reveal slides it in
 * from the top so a sighted keyboard user sees a clear "Skip to
 * results" affordance, while screen-reader users always have it via
 * the focus order.
 */
.skip-link{
  position:absolute;
  inset-inline-start:0;top:-40px;
  z-index:1100;
  padding:8px 14px;
  background:var(--accent);
  color:#1a1a1a;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;
  border-radius:0 0 8px 0;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{
  top:0;
  outline:3px solid rgba(205,161,44,.35);
  outline-offset:2px;
}
[dir="rtl"] .skip-link{border-radius:0 0 0 8px}

/* ── A11y — search status live region ─────────────────────────────
 * The "Found N results" line under the toolbar. Sighted users see
 * it as a quiet meta line; screen-reader users hear it announced
 * (role=status + aria-live=polite). tabindex=-1 on the host span/p
 * means the skip-link target gets keyboard focus without being a
 * focus stop on Tab cycles.
 */
.search-status-live{
  margin:0 0 14px;
  font-size:12.5px;color:var(--text-muted);
  letter-spacing:.02em;
}
.search-status-live:focus{
  outline:none;  /* skip-link landed it; we don't want a focus ring on plain text */
}

/* ── A11y — in-place fetch loading state ──────────────────────────
 * When the in-place nav helper sets aria-busy, fade the region
 * slightly + show a subtle progress bar across the top. Combined
 * with the aria-busy attribute itself, this gives both sighted and
 * SR users feedback that something is happening.
 */
[data-arch-inplace-region][aria-busy="true"]{
  position:relative;
  opacity:.65;
  pointer-events:none;
  transition:opacity 120ms var(--ease);
}
[data-arch-inplace-region][aria-busy="true"]::after{
  content:"";
  position:absolute;left:0;top:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%);
  background-size:200% 100%;
  animation:archInplaceLoad 1.1s linear infinite;
}
@keyframes archInplaceLoad{
  0%   {background-position:200% 0}
  100% {background-position:-200% 0}
}

/* ── Search analytics dashboard (staff-only) ───────────────────────
 * Three-panel grid (top / zero-result / slow queries) above a KPI
 * strip. Tabular data — quiet greys with gold accents on totals and
 * dim red on zero-result counts so a problem term reads at a glance.
 * Kept to one stylesheet block so the dashboard stays portable if
 * we ever pull it into a separate admin app.
 */
.sa-page{max-width:1400px}
.sa-head{margin-bottom:18px}
.sa-eyebrow{
  margin:0 0 4px;font-size:11px;font-weight:700;
  color:var(--text-muted);letter-spacing:.10em;text-transform:uppercase;
}
.sa-title{
  margin:0 0 6px;font-size:26px;font-weight:700;
  color:var(--text-primary);letter-spacing:.005em;
}
.sa-sub{margin:0 0 10px;font-size:13px;color:var(--text-muted)}

.sa-window-pills{display:flex;gap:6px;flex-wrap:wrap}
.sa-pill{
  display:inline-flex;align-items:center;
  height:28px;padding:0 12px;border-radius:99px;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-muted);
  font-size:12px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.sa-pill:hover{background:var(--accent-dim);color:var(--accent);border-color:rgba(205,161,44,.4)}
.sa-pill.is-active{
  background:var(--accent);color:#1a1a1a;border-color:var(--accent);
}

.sa-kpis{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;margin-bottom:22px;
}
.sa-kpi{
  padding:14px 18px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
}
.sa-kpi-num{
  margin:0;font-size:24px;font-weight:700;color:var(--text-primary);
  font-variant-numeric:tabular-nums;letter-spacing:.005em;
}
.sa-kpi-num small{font-size:13px;color:var(--text-muted);font-weight:500;margin-inline-start:3px}
.sa-kpi-label{
  margin:2px 0 0;font-size:11.5px;font-weight:600;
  color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;
}

.sa-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap:14px;
  margin-bottom:18px;
}
.sa-panel{
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.sa-panel-head{
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:var(--bg-surface);
}
.sa-panel-head h2{
  margin:0 0 3px;font-size:14px;font-weight:700;
  color:var(--text-primary);letter-spacing:.005em;
  display:flex;align-items:center;gap:8px;
}
.sa-panel-head h2 i{color:var(--accent);font-size:13px}
.sa-panel-sub{margin:0;font-size:11.5px;color:var(--text-muted)}

.sa-table{
  width:100%;border-collapse:collapse;
  font-size:12.5px;
}
.sa-table thead th{
  text-align:start;
  padding:10px 12px;
  font-size:10.5px;font-weight:700;color:var(--text-muted);
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
}
.sa-table tbody td{
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  color:var(--text-secondary);
}
.sa-table tbody tr:last-child td{border-bottom:none}
.sa-table tbody tr:hover{background:var(--accent-dim)}
.sa-table .sa-num{text-align:end;font-variant-numeric:tabular-nums;width:1%;white-space:nowrap}
.sa-table .sa-action{text-align:end;width:1%;white-space:nowrap}
.sa-q{
  font-weight:500;color:var(--text-primary);
  max-width:280px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sa-q a{color:inherit;text-decoration:none}
.sa-q a:hover{color:var(--accent)}
.sa-bad{color:#ef4444}
[data-theme="light"] .sa-bad{color:#b91c1c}

.sa-add-syn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;
  background:var(--accent-dim);color:var(--accent);
  border:1px solid rgba(205,161,44,.32);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.sa-add-syn:hover{background:var(--accent);color:#1a1a1a;border-color:var(--accent)}
.sa-add-syn i{font-size:9px}

.sa-empty{
  padding:24px 18px;margin:0;
  font-size:12.5px;color:var(--text-muted);text-align:center;font-style:italic;
}

.sa-foot{
  display:flex;gap:10px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--border);
}

[data-theme="light"] .sa-panel{background:#fff;border-color:#e8e1cd}
[data-theme="light"] .sa-panel-head{background:#fafafa}
[data-theme="light"] .sa-table thead th{background:#fafafa}

.sa-section-title{
  font-size:14px;font-weight:700;margin:0 0 12px;
  display:flex;align-items:center;gap:7px;
}
.sa-section-title i{color:var(--accent);font-size:13px}

/* trend chart */
.sa-chart-wrap{
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  padding:18px;margin-bottom:22px;
}
.sa-trend-canvas{height:200px;width:100%}

/* result-type breakdown */
.sa-type-wrap{
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  padding:18px;margin-bottom:22px;
}
.sa-type-bars{display:flex;flex-direction:column;gap:9px}
.sa-type-row{display:flex;align-items:center;gap:10px}
.sa-type-label{
  min-width:72px;font-size:12px;font-weight:600;color:var(--text-muted);
  text-transform:capitalize;
}
.sa-type-bar-track{
  flex:1;height:8px;border-radius:4px;
  background:var(--border);overflow:hidden;
}
.sa-type-bar-fill{
  height:100%;border-radius:4px;
  background:var(--accent);transition:width .3s ease;
}
.sa-type-count{
  min-width:36px;text-align:right;font-size:12px;
  font-weight:600;color:var(--text-muted);
}

[data-theme="light"] .sa-chart-wrap,
[data-theme="light"] .sa-type-wrap{background:#fff;border-color:#e8e1cd}

/* ── Saved searches list page ─────────────────────────────────────
 * Per-user list of stored searches. Each row shows the name + headline
 * meta, an alert-cadence selector, a Run button, and a delete trash
 * button. Clean horizontal layout that adapts to mobile via flex-wrap.
 */
.ss-page{max-width:980px}
.ss-head{margin-bottom:18px}
.ss-eyebrow{
  margin:0 0 4px;font-size:11px;font-weight:700;
  color:var(--text-muted);letter-spacing:.10em;text-transform:uppercase;
}
.ss-title{
  margin:0 0 6px;font-size:26px;font-weight:700;
  color:var(--text-primary);letter-spacing:.005em;
}
.ss-sub{margin:0;font-size:13px;color:var(--text-muted);line-height:1.55}

.ss-list{display:flex;flex-direction:column;gap:10px}
.ss-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.ss-row:hover{
  border-color:rgba(205,161,44,.32);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
.ss-row-body{flex:1;min-width:200px}
.ss-row-name{
  margin:0 0 3px;font-size:14px;font-weight:600;
  color:var(--text-primary);letter-spacing:.005em;
}
.ss-row-meta{
  margin:0;font-size:11.5px;color:var(--text-muted);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.ss-row-query{color:var(--accent);font-weight:500;letter-spacing:.005em}
.ss-row-meta-dot{opacity:.6}

.ss-row-freq{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.ss-freq-label{
  font-size:10.5px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
}
.ss-row-freq select{
  height:32px;padding:0 8px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;
  color:var(--text-primary);font-size:12px;
}

.ss-row-run{flex-shrink:0;font-size:12.5px;padding:7px 14px}

.ss-row-del{
  flex-shrink:0;width:34px;height:34px;border-radius:8px;
  background:transparent;border:1px solid var(--border);
  color:var(--text-muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.ss-row-del:hover{
  background:rgba(239,68,68,.08);
  color:#ef4444;
  border-color:rgba(239,68,68,.40);
}

[data-theme="light"] .ss-row{background:#fff;border-color:#e8e1cd}

/* ── Omnibox mic button ─────────────────────────────────────────
 * Voice-input toggle (feature-detected, hidden by default in the
 * markup; JS unhides when SpeechRecognition is available). Pulses
 * when listening so the user knows the engine is hot.
 */
.omnibox-mic{
  flex-shrink:0;
  width:30px;height:30px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);
  color:var(--text-muted);
  cursor:pointer;font-size:12px;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.omnibox-mic:hover{background:var(--bg-surface);color:var(--text-primary)}
.omnibox-mic.is-listening{
  background:rgba(239,68,68,.10);
  color:#ef4444;
  border-color:rgba(239,68,68,.45);
  animation:omniboxMicPulse 1s ease-in-out infinite;
}
@keyframes omniboxMicPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.40)}
  50%    {box-shadow:0 0 0 6px rgba(239,68,68,0)}
}

/* Banner for the unmigrated-table case. */
.sa-banner{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;margin-bottom:18px;
  background:rgba(205,161,44,.08);
  border:1px solid rgba(205,161,44,.32);
  border-radius:12px;
  color:var(--text-primary);
  font-size:13px;line-height:1.55;
}
.sa-banner i{color:var(--accent);font-size:18px;flex-shrink:0}
.sa-banner code{
  padding:2px 8px;border-radius:5px;
  background:rgba(0,0,0,.18);
  font-family:'SF Mono', ui-monospace, monospace;
  font-size:12px;color:var(--accent);
}
[data-theme="light"] .sa-banner code{background:rgba(0,0,0,.05)}

/* ── Navbar Cmd+K hint ─────────────────────────────────────────────
 * Tiny ⌘K kbd badge tucked at the right edge of the inline navbar
 * search input. Hides on narrow widths to give the input room.
 */
.navbar-search-kbd{
  position:absolute;
  inset-inline-end:8px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  height:20px;padding:0 6px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text-muted);
  font-family:'SF Mono', ui-monospace, monospace;
  font-size:10px;font-weight:600;letter-spacing:.04em;
  pointer-events:none;
  user-select:none;
}
[data-theme="light"] .navbar-search-kbd{background:rgba(0,0,0,.04)}
@media (max-width:920px){
  .navbar-search-kbd{display:none}
}

/* ── Navbar inline autocomplete dropdown (Step 75) ─────────────────
 * Absolutely positioned below the .navbar-search form. Width matches
 * the form; max-height scrolls when results overflow. */
.nav-autocomplete{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:9000;
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.32);
  max-height:420px;overflow-y:auto;overflow-x:hidden;
  padding:4px 0;
}
[data-theme="light"] .nav-autocomplete{
  background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.14);
}
.nav-ac-label{
  padding:8px 14px 4px;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);display:flex;align-items:center;gap:6px;
}
.nav-ac-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;text-decoration:none;color:var(--text-primary);
  transition:background .12s;cursor:pointer;
}
.nav-ac-row:hover,.nav-ac-row.is-focused{
  background:rgba(205,161,44,.09);color:var(--text-primary);
}
[data-theme="light"] .nav-ac-row:hover,[data-theme="light"] .nav-ac-row.is-focused{
  background:rgba(184,134,42,.07);
}
.nav-ac-thumb{
  width:32px;height:32px;border-radius:6px;object-fit:cover;flex-shrink:0;
}
.nav-ac-icon{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(205,161,44,.12);color:var(--accent);border-radius:6px;
  font-size:13px;
}
.nav-ac-body{
  display:flex;flex-direction:column;gap:1px;min-width:0;
}
.nav-ac-title{
  font-size:13px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-ac-title mark{
  background:transparent;color:var(--accent);font-weight:700;padding:0;
}
.nav-ac-sub{
  font-size:11px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-ac-empty{
  padding:16px 14px;font-size:13px;color:var(--text-muted);text-align:center;
}
.nav-ac-foot{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;font-size:12px;font-weight:600;color:var(--accent);
  border-top:1px solid var(--border);text-decoration:none;
  transition:background .12s;
}
.nav-ac-foot:hover,.nav-ac-foot.is-focused{background:rgba(205,161,44,.09);color:var(--accent);}
.nav-ac-foot i{font-size:10px;opacity:.8;}

/* ── Matched-term highlight (search results + omnibox) ─────────────
 * The query terms get wrapped in <mark> on titles + meta lines so
 * the user can scan results for the keyword they typed. Soft gold
 * background, no harsh fluorescent yellow. Same look in the omnibox
 * preview rows for visual continuity with the main search page.
 */
mark.search-hl,
.omnibox-row mark{
  background:rgba(205,161,44,.20);
  color:var(--accent);
  border-radius:3px;
  padding:0 2px;
  font-weight:inherit;
}
[data-theme="light"] mark.search-hl,
[data-theme="light"] .omnibox-row mark{
  background:rgba(184,134,42,.20);
}

/* ── Omnibox modal ─────────────────────────────────────────────────
 * Glass overlay launched by Ctrl/Cmd+K. Centered card, ~640px max,
 * with a search input on top, scrollable results in the middle, and
 * a keyboard-hint footer below. Backdrop captures clicks-outside to
 * close. Body locks scroll while open via .omnibox-open.
 */
.omnibox{
  position:fixed;inset:0;z-index:1090;
  display:flex;align-items:flex-start;justify-content:center;
  padding:max(60px, 8vh) 16px 16px;
}
.omnibox[hidden]{display:none}
.omnibox-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.omnibox-card{
  position:relative;
  width:100%;max-width:640px;
  max-height:80vh;
  display:flex;flex-direction:column;
  background:rgba(22,30,44,.82);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),
             0 6px 16px rgba(0,0,0,.30),
             0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  overflow:hidden;
  animation:omnibox-pop 160ms cubic-bezier(.2,.7,.3,1);
}
@keyframes omnibox-pop{
  from{opacity:0;transform:translateY(-8px) scale(.985)}
  to  {opacity:1;transform:translateY(0)   scale(1)}
}
body.omnibox-open{overflow:hidden}

.omnibox-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.omnibox-head-icon{color:var(--text-muted);font-size:14px;flex-shrink:0}
.omnibox-input{
  flex:1;min-width:0;
  background:transparent;border:none;outline:none;
  color:var(--text-primary);
  font-size:16px;font-weight:500;letter-spacing:.005em;
  padding:6px 0;
}
.omnibox-input::placeholder{color:var(--text-muted)}
.omnibox-input::-webkit-search-cancel-button{display:none}
.omnibox-esc{
  display:inline-flex;align-items:center;justify-content:center;
  height:22px;padding:0 7px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text-muted);
  font-family:'SF Mono', ui-monospace, monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;
  user-select:none;
}
.omnibox-close{
  width:30px;height:30px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);
  color:var(--text-muted);cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.omnibox-close:hover{background:var(--bg-surface);color:var(--text-primary)}

.omnibox-results{
  flex:1;min-height:80px;overflow-y:auto;
  padding:8px 0;
}
.omnibox-results::-webkit-scrollbar{width:8px}
.omnibox-results::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.10);border-radius:99px;
}

.omnibox-section{padding:6px 0 8px}
.omnibox-section + .omnibox-section{border-top:1px solid var(--border)}
.omnibox-section-label{
  display:flex;align-items:center;gap:6px;
  margin:0;padding:6px 16px 6px;
  font-size:10.5px;font-weight:700;letter-spacing:.10em;
  color:var(--text-muted);text-transform:uppercase;
}
.omnibox-section-label i{color:var(--accent);font-size:11px}

.omnibox-row{
  display:flex;align-items:center;gap:12px;
  padding:8px 16px;text-decoration:none;color:inherit;
  transition:background var(--dur-fast) var(--ease);
}
.omnibox-row:hover,
.omnibox-row:focus-visible{background:var(--accent-dim);outline:none}
.omnibox-row-thumb{
  flex-shrink:0;
  width:36px;height:36px;border-radius:10px;overflow:hidden;
  background:var(--bg-surface);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:14px;
}
.omnibox-row-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.omnibox-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.omnibox-row-title{
  font-size:13.5px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.omnibox-row:hover .omnibox-row-title{color:var(--accent)}
.omnibox-row-meta{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.omnibox-row-meta-dot{opacity:.6}

.omnibox-blank{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:36px 16px;text-align:center;
  color:var(--text-muted);
}
.omnibox-blank-icon{font-size:28px;color:var(--accent);opacity:.6;margin-bottom:10px}
.omnibox-blank-title{
  margin:0 0 4px;font-size:13.5px;font-weight:600;color:var(--text-primary);
}
.omnibox-blank-body{margin:0;font-size:12px;line-height:1.55;max-width:420px}
.omnibox-spinner{
  display:inline-block;width:18px;height:18px;
  border:2px solid var(--accent-dim);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:omnibox-spin .7s linear infinite;
  margin-bottom:10px;
}
@keyframes omnibox-spin{to{transform:rotate(360deg)}}

.omnibox-recent-row{
  display:flex;align-items:center;
  padding:0 4px 0 0;
}
.omnibox-recent-link{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  padding:8px 16px;text-decoration:none;color:var(--text-secondary);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.omnibox-recent-link:hover{background:var(--accent-dim);color:var(--accent)}
.omnibox-recent-icon{color:var(--text-muted);font-size:11px}
.omnibox-recent-text{
  flex:1;min-width:0;font-size:13px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.omnibox-recent-x{
  width:28px;height:28px;border-radius:8px;
  background:transparent;border:none;color:var(--text-muted);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.omnibox-recent-x:hover{background:var(--bg-surface);color:var(--danger,#ef4444)}

.omnibox-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:10px 16px;
  background:var(--bg-surface);
  border-top:1px solid var(--border);
}
.omnibox-foot-hint{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11px;color:var(--text-muted);letter-spacing:.02em;
}
.omnibox-foot-hint kbd{
  display:inline-flex;align-items:center;justify-content:center;
  height:18px;padding:0 5px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);border-radius:5px;
  color:var(--text-secondary);
  font-family:'SF Mono', ui-monospace, monospace;
  font-size:10px;font-weight:600;
  margin-inline-end:3px;
}
.omnibox-foot-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--accent);
  text-decoration:none;
  transition:transform var(--dur-fast) var(--ease);
}
.omnibox-foot-cta:hover{transform:translateX(2px)}
.omnibox-foot-cta i{font-size:10.5px}
[dir="rtl"] .omnibox-foot-cta i{transform:scaleX(-1)}

[data-theme="light"] .omnibox-card{background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.08)}
[data-theme="light"] .omnibox-foot-hint kbd,
[data-theme="light"] .omnibox-esc{background:rgba(0,0,0,.04)}

@media (max-width:540px){
  .omnibox{padding-top:max(40px, 4vh)}
  .omnibox-foot-hint kbd:not(:first-child){display:none}
}

/* ── Profile Portfolio tab ───────────────────────────────────────
 * Headers, albums grid, drop-zones, and lightbox styles for the
 * redesigned Portfolio surface. Single-photo "loose shots" continue
 * to use the .gallery-* classes below (untouched). */
.portfolio-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:18px;flex-wrap:wrap;
}
.portfolio-head-text{flex:1 1 280px;min-width:0}
.portfolio-head-sub{font-size:12.5px;color:var(--text-muted);margin:4px 0 0}
.portfolio-head-actions{display:flex;gap:8px;flex-wrap:wrap}

.portfolio-section{margin-bottom:28px}
.portfolio-section-title{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--text-primary);
  text-transform:uppercase;letter-spacing:.04em;
  margin:0 0 12px;
}
.portfolio-section-title i{color:var(--accent);font-size:12px}
.portfolio-section-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 7px;
  background:var(--accent-dim);color:var(--accent);
  border-radius:99px;font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
  margin-inline-start:auto;
}

/* ── Album cards — redesigned ─────────────────────────────────
 * Cover-dominant tile: photo fills the top, a persistent bottom
 * gradient makes the count badge legible, a frosted expand-cue
 * fades in on hover.  Action buttons live in the title row as
 * compact icon-only squares — no text, no extra strip. */
.portfolio-albums-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}

.portfolio-album-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .18s,box-shadow .28s,transform .18s;
}
.portfolio-album-card:hover{
  border-color:rgba(205,161,44,.40);
  box-shadow:0 10px 36px rgba(0,0,0,.22);
  transform:translateY(-4px);
}

/* ── Cover image ── */
.portfolio-album-cover{
  position:relative;display:block;width:100%;
  aspect-ratio:3/2;
  background:var(--bg-surface);
  border:0;padding:0;cursor:zoom-in;
  overflow:hidden;
}
.portfolio-album-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .42s ease;
}
.portfolio-album-card:hover .portfolio-album-cover img{transform:scale(1.07)}

.portfolio-album-cover-fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:40px;opacity:.3;
}

/* persistent bottom gradient */
.portfolio-album-cover-grad{
  position:absolute;bottom:0;left:0;right:0;height:70px;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.52));
  pointer-events:none;
}

/* photo-count pill */
.portfolio-album-count-badge{
  position:absolute;left:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:99px;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.03em;
  pointer-events:none;
}
.portfolio-album-count-badge i{font-size:10px;opacity:.80}

/* expand cue — fades in on card hover */
.portfolio-album-open-cue{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.55);
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;
  opacity:0;
  transition:opacity .22s,transform .22s;
  pointer-events:none;
}
.portfolio-album-card:hover .portfolio-album-open-cue{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* ── Card body ── */
.portfolio-album-body{
  padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:6px;
  flex:1;
}

.portfolio-album-meta-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}

.portfolio-album-title{
  flex:1;min-width:0;
  font-size:14px;font-weight:700;color:var(--text-primary);
  margin:0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.portfolio-album-desc{
  font-size:12px;color:var(--text-muted);line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── Icon action buttons ── */
.portfolio-album-icon-actions{
  display:flex;gap:4px;flex-shrink:0;
  align-items:flex-start;
}

.portfolio-album-icon-btn{
  width:30px;height:30px;
  border-radius:8px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-muted);
  font-size:12px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .14s,color .14s,border-color .14s;
  flex-shrink:0;
}
.portfolio-album-icon-btn:hover{
  background:var(--bg-surface);
  color:var(--text-primary);
  border-color:var(--border-hover);
}
.portfolio-album-icon-btn.is-danger:hover{
  background:rgba(178,62,61,.10);
  color:var(--danger);
  border-color:rgba(178,62,61,.30);
}

/* Multi-file drop zone — used by the New-album + Add-photos modals. */
.portfolio-drop-zone{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:18px 16px;border:1.5px dashed var(--border-hover);border-radius:12px;
  background:var(--bg-surface);
  transition:border-color .15s,background .15s;
}
.portfolio-drop-zone:hover,
.portfolio-drop-zone.is-drag-hover{
  border-color:var(--accent);
  background:rgba(205,161,44,.06);
}
.portfolio-drop-zone-icon{
  width:44px;height:44px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:50%;color:var(--accent);font-size:18px;
}
.portfolio-drop-zone-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.portfolio-drop-zone-text strong{font-size:13.5px;font-weight:700;color:var(--text-primary)}
.portfolio-drop-zone-text small{font-size:11.5px;color:var(--text-muted)}
.portfolio-drop-previews{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center;
}
.portfolio-drop-preview{
  width:62px;height:62px;border-radius:8px;overflow:hidden;
  background:var(--bg-surface);border:1px solid var(--border);
}
.portfolio-drop-preview img{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-drop-preview-count{
  font-size:11.5px;color:var(--text-muted);margin-inline-start:4px;
}
.portfolio-form-help{font-size:11.5px;color:var(--text-muted);margin:6px 0 0}

/* ── Portfolio tab — owner bar + inline customizer ────────────────── */
/* ── Portfolio tab toolbar ─────────────────────────────────────── */
.pf-tab-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:12px 0 14px;
  border-bottom:1px solid var(--border);
  margin-bottom:0;
}
.pf-tab-toolbar-left{display:flex;gap:8px;align-items:center}
.pf-tab-toolbar-right{display:flex;align-items:center;gap:2px}
.pf-tb-btn{height:36px;padding:0 16px;font-size:13px}

/* Tool buttons — compact icon+label pills on the right */
.pf-tb-tool{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;border:none;background:transparent;
  font-size:12.5px;font-weight:500;color:var(--text-muted);
  cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s;white-space:nowrap;
}
.pf-tb-tool:hover{background:var(--bg-surface);color:var(--text-primary)}
.pf-tb-tool--view{
  color:var(--accent);font-weight:600;
}
.pf-tb-tool--view:hover{background:rgba(var(--accent-rgb,.7,.6,.4),.1);color:var(--accent)}
.pf-tb-divider{
  width:1px;height:18px;background:var(--border);margin:0 4px;flex-shrink:0;
}

@media(max-width:600px){
  .pf-tab-toolbar{flex-direction:column;align-items:flex-start}
  .pf-tab-toolbar-right{flex-wrap:wrap}
}
.pf-root--inline{border-radius:0;min-height:unset}
.pf-root--inline .pf-footer{border-radius:0}
.pf-work-card{position:relative}
.pf-work-card-owner{
  position:absolute;top:8px;right:8px;
  display:flex;gap:4px;
  padding:4px;border-radius:10px;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s ease;
  z-index:2;
}
.pf-work-card:hover .pf-work-card-owner,
.pf-work-card:focus-within .pf-work-card-owner{opacity:1}
.pf-work-card-owner .portfolio-album-icon-btn{
  color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);
}
.pf-work-card-owner .portfolio-album-icon-btn:hover{
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);
}
.pf-work-card-owner .portfolio-album-icon-btn.is-danger:hover{
  background:rgba(239,68,68,.35);border-color:rgba(239,68,68,.6);color:#fca5a5;
}
.pf-loose-card{position:relative}
.pf-loose-card-owner{
  position:absolute;top:6px;right:6px;
  display:flex;gap:4px;
  padding:4px;border-radius:10px;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s ease;
  z-index:2;
}
.pf-loose-card:hover .pf-loose-card-owner,
.pf-loose-card:focus-within .pf-loose-card-owner{opacity:1}
.pf-loose-card-owner .portfolio-album-icon-btn{
  color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);
}
.pf-loose-card-owner .portfolio-album-icon-btn:hover{
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);
}
.pf-loose-card-owner .portfolio-album-icon-btn.is-danger:hover{
  background:rgba(239,68,68,.35);border-color:rgba(239,68,68,.6);color:#fca5a5;
}

/* ── New-album modal — 2-column redesign ─────────────────────
 * Left column: meta fields (title · description · cover pick).
 * Right column: tall photo drop zone that dominates visually. */
.pf-album-modal.modal-content{padding:0;overflow:hidden}

.pf-album-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:500px;
}

/* Left — metadata column */
.pf-album-info{
  padding:32px 28px 24px;
  display:flex;
  flex-direction:column;
  border-inline-end:1px solid var(--border);
}

.pf-album-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
}
.pf-album-header .arch-modal-icon{
  flex-shrink:0;margin:0;width:48px;height:48px;font-size:22px;
}
.pf-album-header-text .arch-modal-eyebrow{margin:0 0 2px}
.pf-album-header-text .arch-modal-title{margin:0;font-size:19px}

.pf-album-fields{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.pf-album-fields .arch-form-section{
  padding:0;border:none;margin:0;
}

/* compact cover-file row */
.pf-album-cover-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.pf-album-cover-row input[type=file]{
  flex:1;padding:7px 10px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;
  color:var(--text-primary);font-size:12px;cursor:pointer;
  transition:border-color .15s;
}
.pf-album-cover-row input[type=file]:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(205,161,44,.18);
}

.pf-album-actions{
  display:flex;justify-content:flex-end;gap:10px;
  padding-top:20px;
  margin-top:auto;
  border-top:1px solid var(--border);
}

/* Right — drop-zone column */
.pf-album-drop{
  padding:24px;
  background:var(--bg-deep);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pf-album-drop-zone{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:2px dashed var(--border-hover);
  border-radius:16px;
  cursor:pointer;
  text-align:center;
  padding:32px 24px;
  min-height:240px;
  transition:border-color .18s,background .18s;
  position:relative;
}
.pf-album-drop-zone:hover,
.pf-album-drop-zone.is-drag-hover{
  border-color:var(--accent);
  background:rgba(205,161,44,.05);
}

.pf-album-drop-icon{
  width:68px;height:68px;border-radius:50%;
  background:var(--accent-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;color:var(--accent);
  filter:drop-shadow(0 4px 14px rgba(205,161,44,.35));
}
.pf-album-drop-title{
  font-size:15px;font-weight:700;color:var(--text-primary);
  margin:0;
}
.pf-album-drop-sub{
  font-size:12px;color:var(--text-muted);margin:0;
  line-height:1.5;
}

/* preview strip below drop zone */
.pf-album-drop .portfolio-drop-previews{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  min-height:0;
}

/* Grid column-ratio variants */
.pf-album-grid--3-2{grid-template-columns:3fr 2fr}
.pf-album-grid--1-15{grid-template-columns:1fr 1.5fr}

/* Smaller cover-only right column */
.pf-album-drop--cover{
  padding:20px;
  display:flex;
  flex-direction:column;
}
.pf-album-drop-label{
  font-size:12px;font-weight:600;color:var(--text-primary);
  letter-spacing:.02em;margin:0 0 10px;
}

/* Compact cover drop zone */
.pf-cover-drop-zone{min-height:180px;flex:1}

/* Smaller icon variant */
.pf-album-drop-icon--sm{
  width:44px;height:44px;font-size:20px;
}

/* Add-photos count badge */
.pf-addphotos-count{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:99px;
  border:1px solid var(--border);
  background:var(--bg-surface);
  font-size:13px;color:var(--text-secondary);
  margin-bottom:20px;
  transition:border-color .15s,color .15s,background .15s;
}
.pf-addphotos-count i{color:var(--text-muted);font-size:14px}
.pf-addphotos-count.has-files{
  border-color:rgba(205,161,44,.4);
  background:rgba(205,161,44,.08);
  color:var(--accent);
}
.pf-addphotos-count.has-files i{color:var(--accent)}

/* Responsive — stack at narrow viewports */
@media(max-width:640px){
  .pf-album-grid,
  .pf-album-grid--3-2,
  .pf-album-grid--1-15{grid-template-columns:1fr}
  .pf-album-info{border-inline-end:none;border-bottom:1px solid var(--border)}
  .pf-album-drop{min-height:200px}
  .pf-album-drop--cover{border-top:1px solid var(--border)}
}

/* ── Loose-photo drop zone — single-image preview state ──────
 * .pf-photo-drop-zone extends the album drop zone.
 * When a file is chosen the empty state hides and the
 * preview fills the zone; a bottom overlay offers "Change". */
.pf-photo-drop-zone{position:relative;overflow:hidden}
.pf-photo-drop-empty,
.pf-file-drop-empty,
.pf-file-drop-chosen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:14px;width:100%;flex:1;
}

.pf-photo-drop-preview{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
}
.pf-photo-drop-preview img{
  width:100%;flex:1;
  object-fit:cover;
  display:block;
  border-radius:14px 14px 0 0;
}
.pf-photo-drop-change{
  flex-shrink:0;
  padding:9px 12px;
  background:rgba(0,0,0,.70);
  color:#fff;
  font-size:12px;font-weight:600;
  text-align:center;
  letter-spacing:.02em;
  border-radius:0 0 14px 14px;
  cursor:pointer;
  transition:background .15s;
}
.pf-photo-drop-zone:hover .pf-photo-drop-change{background:rgba(0,0,0,.85)}

/* Plain-text/textarea/file inputs inside the portfolio modal forms.
 * Site uses crispy elsewhere; the portfolio modals use bare <input> so
 * the multi-file + drop-zone interaction stays straightforward. The
 * styling matches the rest of the arch-form vocabulary.  */
.arch-form-label{
  display:block;font-size:12px;font-weight:600;color:var(--text-primary);
  letter-spacing:.02em;margin:0 0 8px;
}
.arch-form-input{
  width:100%;padding:9px 12px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:10px;color:var(--text-primary);
  font-size:13px;line-height:1.5;
  transition:border-color .15s,box-shadow .15s;
}
.arch-form-input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(205,161,44,.18);
}
textarea.arch-form-input{resize:vertical;min-height:64px}
input[type=file].arch-form-input{padding:7px 10px;font-size:12.5px}

/* Lightbox — large modal with arrow-nav around the figure. */
.portfolio-lightbox-modal .modal-content{padding-bottom:18px}
.portfolio-lightbox-head{padding:18px 22px 6px;text-align:center}
.portfolio-lightbox-stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:6px 56px 6px;min-height:320px;
}
.portfolio-lightbox-figure{
  margin:0;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  max-width:100%;
}
.portfolio-lightbox-figure img{
  max-width:100%;max-height:70vh;border-radius:12px;
  background:var(--bg-surface);border:1px solid var(--border);
  display:block;
}
.portfolio-lightbox-caption{
  font-size:13px;color:var(--text-primary);text-align:center;margin:0;
  max-width:640px;
}
.portfolio-lightbox-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-primary);font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,opacity .15s;
}
.portfolio-lightbox-arrow.is-prev{left:8px}
.portfolio-lightbox-arrow.is-next{right:8px}
[dir="rtl"] .portfolio-lightbox-arrow.is-prev{left:auto;right:8px}
[dir="rtl"] .portfolio-lightbox-arrow.is-next{right:auto;left:8px}
.portfolio-lightbox-arrow:hover:not(:disabled){
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
}
.portfolio-lightbox-arrow:disabled{opacity:.35;cursor:not-allowed}
.portfolio-lightbox-foot{
  text-align:center;padding:8px 22px 0;
  font-size:12px;color:var(--text-muted);
}
.portfolio-lightbox-counter{font-variant-numeric:tabular-nums;letter-spacing:.04em}

@media(max-width:560px){
  .portfolio-albums-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .portfolio-lightbox-stage{padding:6px 12px}
  .portfolio-lightbox-arrow{width:36px;height:36px}
  .portfolio-lightbox-arrow.is-prev{left:4px}
  .portfolio-lightbox-arrow.is-next{right:4px}
  [dir="rtl"] .portfolio-lightbox-arrow.is-prev{left:auto;right:4px}
  [dir="rtl"] .portfolio-lightbox-arrow.is-next{right:auto;left:4px}
}

/* ── Profile Gallery tab ────────────────────────────────────────── */
.gallery-upload-form{
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;margin-bottom:18px;
}
.gallery-upload-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gallery-upload-pick{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--bg-surface);border:1px solid var(--border-hover);
  color:var(--text-primary);cursor:pointer;font-size:13px;font-weight:500;
}
.gallery-upload-pick input[type=file]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.gallery-upload-form textarea{
  flex:1 1 200px;min-width:0;border:1px solid var(--border);border-radius:10px;
  background:var(--bg-surface);color:var(--text-primary);font-size:13px;
  padding:8px 10px;line-height:1.5;resize:vertical;
}
.gallery-upload-submit{flex:0 0 auto}
.gallery-upload-help{
  font-size:11.5px;color:var(--text-muted);margin:8px 0 0;
}

.gallery-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.gallery-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.gallery-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 36px rgba(0,0,0,.18);
}
.gallery-card-image{
  position:relative;width:100%;aspect-ratio:3/2;background:var(--bg-surface);overflow:hidden;
}
.gallery-card-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.gallery-card:hover .gallery-card-image img{transform:scale(1.04)}
.gallery-card-image-grad{
  position:absolute;inset:auto 0 0 0;height:60%;
  background:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 100%);
  pointer-events:none;
}
.gallery-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.gallery-card-meta-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.gallery-card-text{
  font-size:13px;color:var(--text-primary);line-height:1.5;margin:0;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.gallery-card-text:empty::before{
  content:attr(data-empty-label);color:var(--text-muted);font-style:italic;
}
.gallery-card-actions{display:flex;gap:4px;flex-shrink:0}
.gallery-card-edit textarea{
  width:100%;border:1px solid var(--border);border-radius:10px;
  background:var(--bg-surface);color:var(--text-primary);font-size:13px;
  padding:8px 10px;line-height:1.5;resize:vertical;
}
.gallery-card-edit-actions{display:flex;gap:4px;margin-top:6px}
.gallery-card-delete-form{margin:0}
.portfolio-album-icon-btn.is-ok:hover{
  background:rgba(var(--success-rgb,34,197,94),.12);
  border-color:var(--success,#22c55e);
  color:var(--success,#22c55e);
}

/* ══════════════════════════════════════════════════════════════════
   Global search — left-rail filters layout (replaces app-toolbar-form
   collapsing panel for /search/ only). Two-column grid: sticky filter
   rail on the left, results column on the right. Below the lg breakpoint
   the rail becomes a slide-in drawer from the left, opened by the
   Filters button in the search-bar row.
   ══════════════════════════════════════════════════════════════════ */
.search-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

/* Rail itself: sticky, internal scroll, glass shell to match the rest
 * of the site's surface vocabulary. */
.search-rail{
  position:sticky;top:80px;
  max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);
  display:flex;flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  overflow:hidden;
}
.search-rail-head{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg-surface);
  flex-shrink:0;
}
.search-rail-title{
  flex:1;display:flex;align-items:center;gap:8px;
  margin:0;font-size:14px;font-weight:700;
  color:var(--text-primary);letter-spacing:-.01em;
}
.search-rail-title i{color:var(--accent);font-size:13px}
.search-rail-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 7px;
  background:var(--accent-dim);color:var(--accent);
  border-radius:99px;font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.search-rail-clear{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;
  color:var(--text-muted);
  text-decoration:none;
  padding:4px 8px;border-radius:6px;
  transition:color .15s,background .15s;
}
.search-rail-clear:hover{color:var(--accent);background:var(--accent-dim)}
.search-rail-close{
  display:none;       /* mobile-drawer-only */
  width:28px;height:28px;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);
  border-radius:6px;color:var(--text-muted);
  cursor:pointer;transition:color .15s,border-color .15s;
}
.search-rail-close:hover{color:var(--text-primary);border-color:var(--accent)}

/* Body scrolls when content exceeds height; thin gold scrollbar. */
.search-rail-body{
  flex:1;min-height:0;
  overflow-y:auto;
  padding:6px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(205,161,44,.32) transparent;
}
.search-rail-body::-webkit-scrollbar{width:6px}
.search-rail-body::-webkit-scrollbar-thumb{background:rgba(205,161,44,.32);border-radius:99px}

/* Each section is a native <details>. Summary line gets a chevron that
 * flips on open. No outer border — sections are separated by a thin
 * dashed divider so the rail reads as one column rather than a stack
 * of cards. */
.search-rail-section{
  border-top:1px dashed var(--border);
  padding:6px 0;
}
.search-rail-section:first-of-type{border-top:none}
.search-rail-section > summary{
  display:flex;align-items:center;gap:8px;
  padding:8px 6px;
  font-size:12px;font-weight:700;
  color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;
  list-style:none;
  user-select:none;
  border-radius:6px;
}
.search-rail-section > summary::-webkit-details-marker{display:none}
.search-rail-section > summary:hover{background:rgba(255,255,255,.025);color:var(--text-primary)}
.search-rail-section > summary > i:first-child{color:var(--accent);font-size:12px}
.search-rail-section > summary > span{flex:1}
.search-rail-chev{
  font-size:10px;color:var(--text-muted);
  transition:transform .2s ease;
}
.search-rail-section[open] > summary .search-rail-chev{transform:rotate(180deg)}
.search-rail-section-body{
  padding:6px 6px 14px;
  display:flex;flex-direction:column;gap:10px;
}

/* Reused chip row + range row from existing styles continue to work
 * inside .search-rail-section-body. New: stacked field rows (label +
 * select/input) optimised for the narrow rail width. */
.search-rail-field{
  display:flex;flex-direction:column;gap:5px;
  font-size:12px;
}
.search-rail-field-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
}
.search-rail-field-label i{color:var(--accent);font-size:11px}
.search-rail-field select,
.search-rail-field input[type="text"]{
  width:100%;height:34px;padding:0 10px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:12.5px;
  appearance:auto;
}
.search-rail-field select:focus,
.search-rail-field input[type="text"]:focus{
  outline:none;border-color:rgba(205,161,44,.55);
  box-shadow:0 0 0 3px rgba(205,161,44,.18);
}
.search-rail-toggle{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text-secondary);
  cursor:pointer;padding:6px 4px;
  border-radius:6px;
  transition:background .15s,color .15s;
}
.search-rail-toggle:hover{background:rgba(255,255,255,.025);color:var(--text-primary)}
.search-rail-toggle input[type="checkbox"]{
  width:14px;height:14px;flex-shrink:0;cursor:pointer;
  accent-color:var(--accent);
}
.search-rail-toggle i{color:var(--accent);font-size:11px}

/* Sticky footer with the Apply button. */
.search-rail-actions{
  flex-shrink:0;
  padding:12px 14px;
  border-top:1px solid var(--border);
  background:var(--bg-surface);
}
.search-rail-actions .arch-cta{width:100%}

/* ── Right column: search bar + results ─────────────────────────── */
.search-main{min-width:0}
.search-bar-row{
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;
}
.search-bar-input{
  flex:1;display:flex;align-items:center;gap:10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:99px;
  padding:0 18px;height:44px;
  transition:border-color .15s,box-shadow .15s;
}
.search-bar-input:focus-within{
  border-color:rgba(205,161,44,.55);
  box-shadow:0 0 0 3px rgba(205,161,44,.18);
}
.search-bar-input > i{color:var(--text-muted);font-size:13px}
/* Submit-on-click magnifying-glass button — same visual position as
 * the old decorative icon, but clickable. Hover/focus pick up the
 * gold accent so the affordance reads. */
.search-bar-submit{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;padding:0;margin:0;
  width:18px;height:18px;flex-shrink:0;cursor:pointer;
  color:var(--text-muted);
  transition:color .15s;
}
.search-bar-submit i{font-size:13px;line-height:1}
.search-bar-submit:hover,
.search-bar-submit:focus-visible{color:var(--accent);outline:none}
.search-bar-submit:focus-visible{
  box-shadow:0 0 0 2px rgba(205,161,44,.35);border-radius:50%;
}
.search-bar-input input[type="search"]{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text-primary);font-size:14px;
  padding:0;height:100%;
}

/* Mobile-only Filters trigger; CSS hides on lg+. */
.search-rail-trigger{
  display:none;
  align-items:center;gap:8px;
  height:44px;padding:0 16px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:99px;
  color:var(--text-primary);
  font-size:13px;font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.search-rail-trigger:hover{border-color:var(--accent);color:var(--accent)}
.search-rail-trigger i{font-size:13px}

/* Backdrop sits behind the open drawer. */
.search-rail-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:1090;
  animation:searchRailFade .18s ease-out;
}
@keyframes searchRailFade{from{opacity:0}to{opacity:1}}

/* ── Below lg: rail becomes a left-side drawer ──────────────────── */
@media (max-width: 991.98px){
  .search-layout{grid-template-columns:1fr}
  .search-rail{
    position:fixed;top:0;left:0;bottom:0;
    width:min(360px, 92vw);max-height:none;
    transform:translateX(-100%);
    transition:transform .2s ease-out;
    z-index:1100;border-radius:0;
    box-shadow:0 0 30px rgba(0,0,0,.45);
  }
  .search-rail.is-open{transform:translateX(0)}
  .search-rail-close{display:inline-flex}
  .search-rail-trigger{display:inline-flex}
  /* RTL: drawer enters from the inline-start = physical right (Batch 7). */
  [dir="rtl"] .search-rail{left:auto;right:0;transform:translateX(100%)}
  [dir="rtl"] .search-rail.is-open{transform:translateX(0)}
}
[data-theme="light"] .search-rail{box-shadow:0 4px 14px rgba(0,0,0,.08)}
[data-theme="light"] .search-rail-backdrop{background:rgba(0,0,0,.40)}

/* ── Search type tabs (step 77) ─────────────────────────────────── */
.search-tabs{
  display:flex;align-items:center;gap:2px;
  flex-wrap:wrap;
  margin-bottom:10px;
  border-bottom:1px solid var(--border);
  padding-bottom:0;
}
.search-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  border-radius:8px 8px 0 0;
  font-size:.85rem;font-weight:500;
  color:var(--text-muted);
  text-decoration:none;
  border:1px solid transparent;
  border-bottom:none;
  transition:color .15s,background .15s;
  position:relative;top:1px;
}
.search-tab:hover{color:var(--text);background:var(--bg-card)}
.search-tab.is-active{
  color:var(--accent);
  background:var(--bg-card);
  border-color:var(--border);
  border-bottom-color:var(--bg-card);
}
.search-tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;
  background:var(--accent);
  color:#000;
  font-size:.7rem;font-weight:700;
  line-height:1;
}
.search-tab.is-active .search-tab-count{background:var(--accent)}
.search-tab:not(.is-active) .search-tab-count{
  background:var(--bg-surface);
  color:var(--text-muted);
}
.search-rail-hint-tab{
  padding:.75rem 1rem;margin:0;
  opacity:.65;font-size:.8rem;
  border-top:1px solid var(--border);
}
[data-theme="light"] .search-tab.is-active{border-bottom-color:var(--bg-body)}
[data-theme="light"] .search-tab:hover{background:rgba(0,0,0,.03)}

/* ── Universal filters bar (under search input, right column) ────── */
.search-universal{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;
  margin-bottom:14px;
  padding:12px 16px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
}
.search-universal-cell{
  display:flex;flex-direction:column;gap:4px;
  flex:1;min-width:140px;
  font-size:12px;
}
.search-universal-label{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
}
.search-universal-label i{color:var(--accent);font-size:11px}
.search-universal-cell select{
  height:34px;padding:0 10px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);font-size:12.5px;
}
.search-universal-cell select:focus{
  outline:none;border-color:rgba(205,161,44,.55);
  box-shadow:0 0 0 3px rgba(205,161,44,.18);
}
.search-universal-toggle{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--text-secondary);
  cursor:pointer;padding:6px 10px;
  border-radius:8px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  white-space:nowrap;
  transition:border-color .15s,color .15s;
}
.search-universal-toggle:hover{border-color:var(--accent);color:var(--text-primary)}
.search-universal-toggle input{accent-color:var(--accent);width:14px;height:14px}
.search-universal-toggle i{color:var(--accent);font-size:11px}

/* ── Multi-select dropdown (msel) — used for category filters ────── */
.search-rail-hint{
  font-size:11px;color:var(--text-secondary);
  margin:0 0 4px;line-height:1.5;
}
.msel{position:relative}
.msel-trigger{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:7px 10px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-family:inherit;font-size:12.5px;
  cursor:pointer;
  transition:border-color .15s;
}
.msel-trigger:hover,.msel.is-open .msel-trigger{border-color:rgba(205,161,44,.55)}
.msel-trigger > .search-rail-field-label{flex-shrink:0;margin:0}
.msel-summary{
  flex:1;display:flex;justify-content:flex-end;align-items:center;
  font-size:11.5px;
}
.msel-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 6px;
  background:var(--accent-dim);color:var(--accent);
  border-radius:99px;font-weight:700;font-size:10.5px;
  font-variant-numeric:tabular-nums;
}
.msel-placeholder{color:var(--text-muted);font-style:italic}
.msel-chev{font-size:9px;color:var(--text-muted);transition:transform .2s}
.msel.is-open .msel-chev{transform:rotate(180deg)}
.msel-menu{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  z-index:50;
  max-height:280px;overflow-y:auto;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:0 6px 22px rgba(0,0,0,.34);
  padding:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(205,161,44,.32) transparent;
}
.msel-menu::-webkit-scrollbar{width:6px}
.msel-menu::-webkit-scrollbar-thumb{background:rgba(205,161,44,.32);border-radius:99px}
.msel-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  font-size:12.5px;color:var(--text-secondary);
  cursor:pointer;border-radius:6px;
  transition:background .15s,color .15s;
}
.msel-row:hover{background:rgba(255,255,255,.04);color:var(--text-primary)}
.msel-row input{accent-color:var(--accent);width:14px;height:14px;flex-shrink:0}

/* ── Result cards: stop the rail-narrowed main column from squeezing.
 *    Bootstrap's .col-lg-3 (4 per row) and .col-lg-4 (3 per row) are
 *    too tight when ~300px is eaten by the rail. Cap to 3 + 2 per row
 *    until xxl, then restore the originals. */
@media (min-width:992px) and (max-width:1399.98px){
  .search-main .row > [class*="col-lg-3"]{
    flex:0 0 auto;width:33.3333%;
  }
  .search-main .row > [class*="col-lg-4"]{
    flex:0 0 auto;width:50%;
  }
}

/* ── Save-this-search modal — internal field styling ──────────────────
 * The save-search form lives inside the .arch-modal shell. Its label
 * + input pairs follow the project's "small uppercase label, themed
 * input" rhythm; classes below replace what used to be repeated inline
 * style="…" on each label/input pair. Padding on the form and actions
 * footer uses the same eyebrow rhythm as other arch-modal bodies. */
.search-save-form{padding:0 22px 22px}
.search-save-field{margin-bottom:14px}
.search-save-field-label{
  font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.search-save-field-input{
  width:100%;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-primary);padding:8px 12px;
  font-size:13px;margin-top:6px;
}
.search-save-actions{
  padding:14px 0 0;border-top:1px solid var(--border);margin-top:14px;
}
.search-save-blurb{margin:0 0 14px;font-size:13px;color:var(--text-muted);line-height:1.55}

/* ── Operator help modal — inner spacing ─────────────────────────── */
.search-help-blurb{margin:0 0 14px;font-size:13px;color:var(--text-muted);line-height:1.6}
.search-help-actions{padding:14px 22px 22px}
/* Sub-section header inside the help modal — divides "Search syntax"
 * from "Keyboard navigation". Slim uppercase eyebrow styled like
 * the .sec-label idiom used elsewhere on the site. */
.search-help-section-label{
  margin:0 0 8px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
}
.search-help-section-label-spaced{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

/* ── Top-results section — bolt icon highlight ───────────────────── */
.search-top-bolt{color:var(--accent)}

/* ── Search-result cards: jobs ─────────────────────────────────────
 * Light variant of the main /jobs/ listing card used by the cross-
 * type general-search results. Just a meta strip and a small View
 * button — the full match-score/apply/chip-stack lives on
 * jobs.html where its dependent context is available. */
.job-search-card-meta{font-size:12px;color:var(--text-muted)}
.job-search-card-cta{font-size:12px;padding:6px 14px}

/* ── Search-result cards: groups ───────────────────────────────────
 * Sized to match the office search card (same grid column class +
 * matching cover aspect-ratio + matching description height) so the
 * Groups and Offices result rows feel like paired surfaces rather than
 * two unrelated sections. The privacy chip in the cover corner mirrors
 * the .ov-card-verified placement on the office card. */
.group-search-card-link{text-decoration:none;color:inherit;display:block;height:100%}
.group-search-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
  /* Project card-height standard — same value as .post-card /
   * .project-card / .office-card / .group-card use so every grid
   * row aligns regardless of which type populates it. Written
   * explicitly here (not via a shared variable) so the group search
   * card height can diverge from the others later without reaching
   * across files. */
  height:480px;width:100%;
  display:flex;flex-direction:column;
  transition:transform var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.group-search-card-link:hover .group-search-card{
  transform:translateY(-2px);
  border-color:rgba(205,161,44,.42);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.group-search-card-cover-wrap{
  position:relative;aspect-ratio:16 / 9;width:100%;
  background:var(--bg-surface);overflow:hidden;
}
.group-search-card-cover{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.group-search-card-link:hover .group-search-card-cover{transform:scale(1.04)}
.group-search-card-cover-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);font-weight:700;font-size:42px;
  letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.group-search-card-privacy{
  position:absolute;top:10px;inset-inline-end:10px;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:99px;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.03em;
  backdrop-filter:blur(4px);
}
.group-search-card-privacy i{font-size:9.5px}

/* Admin mark — top-LEFT cover overlay for the search card. Mirrors
 * .group-card-admin-mark from groups.css but lives in the dedicated
 * .group-search-card-* namespace so changing the search-card admin
 * mark doesn't touch the listing/profile cards (per the no-shared-
 * classes principle). Renders only when the viewer is the group's
 * admin. Icon-only — the crown reads on its own. */
.group-search-card-admin-mark{
  position:absolute;top:10px;inset-inline-start:10px;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:99px;
  background:rgba(0,0,0,.55);color:var(--accent);
  backdrop-filter:blur(4px);
  z-index:2;
  box-shadow:inset 0 0 0 1px rgba(205,161,44,.45);
}
.group-search-card-admin-mark i{font-size:11px}
.group-search-card-body{
  padding:14px 18px;flex:1;
  display:flex;flex-direction:column;gap:6px;
}
.group-search-card-title{
  font-size:16px;font-weight:600;color:var(--text-primary);
  line-height:1.4;margin:0;
}
.group-search-card-link:hover .group-search-card-title{color:var(--accent)}
.group-search-card-meta{
  font-size:12px;color:var(--text-muted);margin:0;
  display:inline-flex;align-items:center;gap:6px;
}
.group-search-card-meta i{color:var(--accent);font-size:11px}
.group-search-card-desc{
  font-size:13px;color:var(--text-secondary);line-height:1.5;
  margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
[data-theme="light"] .group-search-card{background:#fff;border-color:#e8e1cd;box-shadow:0 1px 3px rgba(0,0,0,.04)}

[data-theme="light"] .msel-menu{box-shadow:0 6px 22px rgba(0,0,0,.14)}

/* ════════════════════════════════════════════════════════════════════ *
 * Expo cross-link pill (step 14 of the Expo roadmap).                 *
 *                                                                     *
 * Inserted by:                                                        *
 *   - the {% expo "<slug>" %} template tag (expo/templatetags/...)    *
 *   - the TinyMCE "Insert Expo architect link" plugin                 *
 *     (static/javascript/tinymce/expo_link_plugin.js)                 *
 *                                                                     *
 * Defined here in style.css (loaded site-wide via base.html) so pills *
 * render the same in posts, projects, and any rich-text body — not    *
 * just on /expo/ pages.                                               *
 * ════════════════════════════════════════════════════════════════════ */
.hall-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 10px 2px;
  background: rgba(205, 161, 44, 0.12);
  color: #ffd35e;
  border: 1px solid rgba(205, 161, 44, 0.32);
  border-radius: 99px;
  font-size: 0.92em;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
  transition: background .15s, border-color .15s, color .15s;
}
.hall-pill::before {
  content: "▣";
  font-size: 0.78em;
  color: #cda12c;
  margin-right: 1px;
}
.hall-pill:hover,
.hall-pill:focus-visible {
  background: rgba(205, 161, 44, 0.22);
  border-color: rgba(205, 161, 44, 0.6);
  color: #ffd35e;
  text-decoration: none;
  outline: none;
}
.hall-pill--missing {
  background: rgba(255, 255, 255, 0.04);
  color: #8a93a6;
  border-color: rgba(255, 255, 255, 0.12);
  cursor: not-allowed;
}
.hall-pill--missing::before {
  content: "?";
  color: #8a93a6;
}
[data-theme="light"] .hall-pill {
  background: rgba(184, 134, 42, 0.14);
  color: #8a6315;
  border-color: rgba(184, 134, 42, 0.36);
}
[data-theme="light"] .hall-pill::before { color: #8a6315; }
[data-theme="light"] .hall-pill:hover,
[data-theme="light"] .hall-pill:focus-visible {
  background: rgba(184, 134, 42, 0.22);
  border-color: rgba(184, 134, 42, 0.6);
  color: #6b4c0a;
}
[data-theme="light"] .hall-pill--missing {
  background: rgba(0, 0, 0, 0.04);
  color: #6b7280;
  border-color: rgba(0, 0, 0, 0.12);
}


/* ── My-activity hub — shared tab bar ──────────────────────────────
 *
 * Used by templates/users/my_invitations.html, my_reports.html, and
 * my_applications.html — three sibling pages that aggregate cross-
 * app rows into tabbed views. The bar sits between the page header
 * and the .notif-list panes; panes are show/hide via [hidden] from
 * the inline tab dispatcher in each template.
 * ────────────────────────────────────────────────────────────────── */
.my-act-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px;margin:0 0 18px;
  border-radius:14px;
  background:var(--bg-surface);
  border:1px solid var(--border-hover);
}
.my-act-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:10px;
  background:transparent;border:1px solid transparent;
  color:var(--text-muted);font-size:13px;font-weight:600;
  letter-spacing:.01em;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.my-act-tab:hover{
  background:rgba(255,255,255,.03);
  color:var(--text-primary);
}
.my-act-tab.is-active{
  background:var(--accent-dim);
  border-color:rgba(205,161,44,.45);
  color:#facc15;
}
.my-act-tab i{font-size:11px}
.my-act-tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;border-radius:99px;
  background:rgba(255,255,255,.06);
  color:var(--text-muted);
  font-size:11px;font-weight:700;letter-spacing:.02em;
}
.my-act-tab.is-active .my-act-tab-count{
  background:rgba(205,161,44,.24);
  color:#facc15;
}
.my-act-pane{margin-top:0}

/* ── User-management / shared tab strip (um-*) ─────────────────
 * Used on users_management and my_invitations pages. */
.um-tab-strip{
  display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;
  border-bottom:2px solid var(--border);
  padding-bottom:0;
  scrollbar-width:none;
}
.um-tab-strip::-webkit-scrollbar{display:none}
.um-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  font-size:13px;font-weight:500;color:var(--text-muted);
  background:none;border:none;border-bottom:2px solid transparent;
  margin-bottom:-2px;cursor:pointer;
  transition:color .15s,border-color .15s;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.um-tab:hover{color:var(--text-primary);background:var(--accent-dim)}
.um-tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.um-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  font-size:10px;font-weight:700;border-radius:99px;
  background:var(--border-hover);color:var(--text-muted);
}
.um-badge--alert{background:rgba(239,68,68,.15);color:#ef4444}
.um-panel{padding:4px 0}
.um-row{
  display:flex;align-items:center;gap:12px;padding:11px 8px;
  border-top:1px solid var(--border);
  transition:background .12s;
  border-radius:var(--radius-sm);
}
.um-row:first-of-type,.um-panel>p+.um-row{border-top:0}
.um-row:hover{background:rgba(255,255,255,.02)}
.um-row.is-removing{opacity:0;transform:translateX(-14px);transition:opacity .25s,transform .25s}
.um-avatar{flex-shrink:0;display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid var(--border)}
.um-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.um-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.um-row-name{font-size:14px;font-weight:600;color:var(--text-primary);text-decoration:none;transition:color .12s}
.um-row-name:hover{color:var(--accent)}
.um-row-sub{font-size:11.5px;color:var(--text-muted)}
.um-row-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.um-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;font-size:12px;font-weight:600;
  border-radius:99px;border:1px solid transparent;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  line-height:1.4;
}
.um-btn i{font-size:10px}
.um-btn--ok{background:rgba(34,197,94,.12);color:#22c55e;border-color:rgba(34,197,94,.25)}
.um-btn--ok:hover{background:rgba(34,197,94,.22);border-color:rgba(34,197,94,.4)}
.um-btn--ghost{background:rgba(255,255,255,.05);color:var(--text-muted);border-color:var(--border-hover)}
.um-btn--ghost:hover{background:var(--accent-dim);color:var(--accent);border-color:rgba(205,161,44,.3)}
.um-btn--danger{background:rgba(239,68,68,.1);color:#ef4444;border-color:rgba(239,68,68,.25);padding:5px 10px}
.um-btn--danger:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.45)}
.um-btn--danger-ghost{background:rgba(239,68,68,.08);color:#ef4444;border-color:rgba(239,68,68,.2)}
.um-btn--danger-ghost:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.4)}
.um-empty{
  color:var(--text-muted);font-size:13px;font-style:italic;
  padding:28px 0;text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:8px;
}
.um-empty i{font-size:24px;opacity:.35}
.um-foot{margin:12px 0 0;text-align:right}
.um-foot-link{font-size:12px;color:var(--text-muted);text-decoration:none}
.um-foot-link:hover{color:var(--accent)}
.um-search{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:7px 12px;transition:border-color .15s}
.um-search:focus-within{border-color:rgba(205,161,44,.45)}
.um-search-icon{color:var(--text-muted);font-size:13px;flex-shrink:0}
.um-search-input{flex:1;background:transparent;border:0;outline:none;color:var(--text-primary);font-size:13.5px;font-family:inherit}
.um-search-input::placeholder{color:var(--text-muted)}
.um-search-input::-webkit-search-cancel-button{cursor:pointer}
.um-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 0 10px;border-bottom:1px solid var(--border)}
.um-toolbar--bulk{padding:10px 0 4px;border-top:1px solid var(--border);border-bottom:0}
.um-toolbar-hint{font-size:11.5px;color:var(--text-muted);margin-left:4px}
.um-row-check{display:flex;align-items:center;flex-shrink:0;padding-right:4px}
.um-row-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;border-radius:3px}
@media(max-width:560px){
  .um-tab{padding:6px 10px;font-size:12px}
  .um-row-actions{gap:4px}
  .um-btn{padding:4px 9px;font-size:11px}
  .um-toolbar{gap:4px}
}

/* ── Step 33: Similar projects strip ──────────────────────────────────── */
.proj-sim-section{padding:20px 22px}
.proj-sim-more{font-size:12px;font-weight:600;color:var(--text-muted);text-decoration:none;transition:color .15s}
.proj-sim-more:hover{color:var(--accent)}
.proj-sim-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.proj-sim-card{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:var(--bg-card);text-decoration:none;transition:border-color .15s,background .15s}
.proj-sim-card:hover{border-color:var(--accent);background:rgba(205,161,44,.04)}
.proj-sim-thumb{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;flex-shrink:0}
.proj-sim-thumb-gradient{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:rgba(255,255,255,.2)}
.proj-sim-meta{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column;gap:3px}
.proj-sim-title{font-size:13px;font-weight:600;margin:0;line-height:1.4;color:var(--text-primary)}
.proj-sim-sub{font-size:11px;color:var(--text-muted);margin:0}
@media(max-width:900px){.proj-sim-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.proj-sim-strip{grid-template-columns:1fr}}

/* ── Step 34: Media tabs + 3D iframe panel ────────────────────────── */
.proj-media-tabs{display:flex;gap:8px;flex-wrap:wrap}
.proj-media-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;font-size:13px;font-weight:600;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s}
.proj-media-tab.is-active{border-color:var(--accent);color:var(--accent);background:rgba(205,161,44,.09)}
.proj-media-tab:hover:not(.is-active){border-color:var(--border-hover);color:var(--text-primary);background:rgba(255,255,255,.03)}
.proj-3d-panel{overflow:hidden;padding:0}
.proj-3d-wrapper{position:relative;width:100%;aspect-ratio:16/9}
.proj-3d-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ── Step 35: Cover video — carousel slide + card play overlay ──────── */
.proj-carousel-video-slide{background:#000}
.proj-video-embed-wrap{position:relative;width:100%;aspect-ratio:16/9}
.proj-video-embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.proj-thumb-video{position:relative;overflow:hidden}
.proj-thumb-video-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:20px;color:rgba(255,255,255,.5);background:rgba(0,0,0,.4)}
.proj-thumb-play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.project-card-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff;opacity:.75;pointer-events:none;transition:opacity .15s,font-size .15s;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.project-card:hover .project-card-play-overlay{opacity:1;font-size:46px}
@media(hover:none){.project-card-play-overlay{font-size:32px;opacity:.85}}

/* ── Step 37: Featured project hero on profile ─────────────────────── */
.proj-featured-hero{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(205,161,44,.3);background:var(--bg-card)}
.proj-featured-badge{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:var(--accent);color:#000;font-size:11px;font-weight:700;letter-spacing:.04em}
.proj-featured-link{position:absolute;inset:0;z-index:2}
.proj-featured-cover{width:100%;aspect-ratio:21/7;background-size:cover;background-position:center;flex-shrink:0;min-height:160px}
.proj-featured-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.55) 100%)}
.proj-featured-body{padding:20px 22px 22px;position:relative}
.proj-featured-title{font-size:20px;font-weight:700;color:var(--text-primary);margin:0 0 6px}
.proj-featured-desc{font-size:13.5px;color:var(--text-muted);margin:0 0 12px;line-height:1.55}
.proj-featured-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-muted)}
.proj-featured-meta i{margin-right:3px}
@media(max-width:640px){.proj-featured-title{font-size:17px}.proj-featured-cover{aspect-ratio:16/7}}


/* ── Step 38: Salary currency select in toolbar ─────────────────────── */
/* .app-filter-cell select has width:100% — override with two-class specificity */
.jobs-currency-select{height:38px;padding:0 4px 0 7px;border-radius:7px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);font-size:12px;cursor:pointer}
.app-filter-range .jobs-currency-select{flex-shrink:0;width:66px}
.jobs-currency-select:focus{outline:none;border-color:var(--accent)}

/* ── Step 40: Similar jobs strip on view_job ────────────────────────── */
.jv-sim-section{margin-top:28px}
.jv-sim-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.jv-sim-more{font-size:12.5px;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.jv-sim-more:hover{text-decoration:underline}
.jv-sim-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.jv-sim-card{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);text-decoration:none;transition:border-color .15s,background .15s}
.jv-sim-card:hover{border-color:var(--border-hover);background:var(--bg-hover)}
.jv-sim-card-top{display:flex;align-items:center;gap:9px}
.jv-sim-logo{width:32px;height:32px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--bg-surface)}
.jv-sim-logo--fallback{display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-muted)}
.jv-sim-card-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.jv-sim-firm{font-size:11.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jv-sim-loc{font-size:11px;color:var(--text-muted)}
.jv-sim-loc i{margin-right:2px}
.jv-sim-title{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jv-sim-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.jv-sim-chip{display:inline-block;padding:2px 7px;border-radius:99px;font-size:10.5px;font-weight:600;background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border)}
.jv-sim-chip--salary{color:var(--accent);border-color:rgba(205,161,44,.25);background:rgba(205,161,44,.07)}
@media(max-width:600px){.jv-sim-row{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.jv-sim-row{grid-template-columns:1fr}}

/* ── Step 41: Deadline closed badge in view_job info list ───────────── */
.jv-deadline-closed{display:inline-block;padding:1px 7px;border-radius:99px;font-size:10.5px;font-weight:700;background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border);margin-left:4px;vertical-align:middle}

/* ── Step 43: Recruiter dashboard ───────────────────────────────────── */
.rd-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.rd-eyebrow{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.rd-title{font-size:24px;font-weight:800;color:var(--text-primary)}
.rd-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:60px 20px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card)}
.rd-empty-icon{font-size:40px;color:var(--text-muted);opacity:.4}
.rd-empty h2{font-size:18px;font-weight:700;color:var(--text-primary)}
.rd-empty p{font-size:14px;color:var(--text-muted);max-width:400px}
.rd-kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.rd-kpi{display:flex;flex-direction:column;gap:3px;padding:18px 20px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card)}
.rd-kpi-num{font-size:32px;font-weight:800;color:var(--accent);line-height:1}
.rd-kpi-num--muted{color:var(--text-muted)}
.rd-kpi-label{font-size:12px;font-weight:600;color:var(--text-primary);margin-top:4px}
.rd-kpi-sub{font-size:11px;color:var(--text-muted)}
.rd-body{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.rd-body{grid-template-columns:1fr}}
.rd-panel{padding:22px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card)}
.rd-panel-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.rd-panel-title i{color:var(--accent)}
.rd-panel-empty{font-size:13px;color:var(--text-muted);text-align:center;padding:24px 0}
.rd-chart-wrap{position:relative;height:260px}
.rd-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rd-table{width:100%;border-collapse:collapse;font-size:13px}
.rd-table th{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;padding:0 0 10px;border-bottom:1px solid var(--border)}
.rd-table td{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.rd-table tr:last-child td{border-bottom:none}
.rd-table-num{text-align:right;padding-left:12px;white-space:nowrap;color:var(--text-muted)}
.rd-table-link{color:var(--text-primary);text-decoration:none}
.rd-table-link:hover{color:var(--accent);text-decoration:underline}
.rd-table-bar{font-weight:700;color:var(--accent)}

/* ── Step 50: Featured projects grid ────────────────────────────────── */
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:24px}
.fp-card{position:relative;border-radius:10px;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);text-decoration:none;color:var(--text-primary);transition:border-color .15s,transform .15s;display:flex;flex-direction:column}
.fp-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.fp-img-frame{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bg-surface)}
.fp-img{width:100%;height:100%;background-size:cover;background-position:center;background-color:var(--bg-surface)}
.fp-body{padding:10px 12px}
.fp-title{font-size:.85rem;font-weight:700;color:var(--text-primary);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fp-remove-form{position:absolute;top:6px;right:6px;margin:0}
.fp-remove-btn{width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;backdrop-filter:blur(4px);transition:background .15s}
.fp-remove-btn:hover{background:rgba(220,38,38,.75)}
.fp-add-btn{border-radius:10px;border:2px dashed var(--border);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:.8rem;padding:24px 16px;transition:border-color .15s,color .15s;min-height:140px}
.fp-add-btn:hover{border-color:var(--accent);color:var(--accent)}
.fp-add-btn i{font-size:1.4rem}
.fp-empty-mgr{padding:20px;border:2px dashed var(--border);border-radius:10px;text-align:center;color:var(--text-muted);margin-bottom:20px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.88rem}
.fp-picker{margin-bottom:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.fp-picker-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);font-size:.82rem;font-weight:700;color:var(--text-primary)}
.fp-picker-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:2px 4px}
.fp-picker-close:hover{color:var(--text-primary)}
.fp-picker-list{display:flex;flex-direction:column;max-height:320px;overflow-y:auto}
.fp-picker-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);margin:0}
.fp-picker-row:last-child{border-bottom:none}
.fp-picker-thumb{width:44px;height:36px;border-radius:5px;background-size:cover;background-position:center;flex-shrink:0}
.fp-picker-thumb--blank{background:var(--bg-surface)}
.fp-picker-name{flex:1;font-size:.83rem;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-picker-pin{font-size:.75rem;padding:3px 10px;flex-shrink:0}
.fp-picker-empty{padding:16px 14px;font-size:.83rem;color:var(--text-muted);margin:0}

/* ── Step 49: Office review response ────────────────────────────────── */
.rv-response{margin-top:14px;padding:12px 14px;border-radius:8px;background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--accent)}
.rv-response-head{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-bottom:7px;flex-wrap:wrap}
.rv-response-head strong{color:var(--text-primary);font-weight:700}
.rv-response-head .ov-card-verified{font-size:12px;color:var(--accent)}
.rv-response-meta{font-size:11px}
.rv-response-body{font-size:13px;color:var(--text-primary);margin:0;line-height:1.55}
.rv-response-delete-form{margin-top:8px}
.rv-response-delete-btn{font-size:11px;padding:2px 8px;color:var(--danger);border-color:var(--danger);opacity:.75}
.rv-response-delete-btn:hover{opacity:1}
.rv-response-form{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rv-response-textarea{width:100%;resize:vertical;min-height:60px;padding:8px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:13px;font-family:inherit;transition:border-color .15s}
.rv-response-textarea:focus{outline:none;border-color:var(--accent)}
.rv-response-submit-btn{align-self:flex-start;font-size:12px}

/* ── Step 48: Now Hiring badge + Open Roles section ─────────────────── */
@keyframes arch-hiring-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.5)}}
.office-now-hiring-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;background:#dcfce7;border:1px solid #86efac;color:#15803d}
.office-now-hiring-badge--sm{padding:2px 6px;gap:4px;background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.25);border-radius:5px;font-weight:500;color:#15803d}
.office-information .office-now-hiring-badge--sm,.office-information .office-size-badge[data-tier]{font-size:10px;line-height:1;padding:2px 6px;font-weight:500;border-radius:5px;background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.25);color:#15803d}
.office-hiring-pulse{width:7px;height:7px;border-radius:50%;background:#16a34a;flex-shrink:0;animation:arch-hiring-pulse 1.6s ease-in-out infinite}
.office-now-hiring-badge--sm .office-hiring-pulse{width:5px;height:5px}
.ov-hiring-meta{padding:2px 9px;font-size:11px}
.ov-open-roles{display:flex;flex-direction:column;gap:8px}
.ov-role-card{display:flex;flex-direction:column;gap:3px;padding:14px 18px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.ov-role-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ov-role-card-title{font-size:15px;font-weight:700;color:var(--text-primary)}
.ov-role-card-meta{font-size:13px;color:var(--text-muted)}

/* ── Step 47: Office size tier badge ────────────────────────────────── */
.office-size-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary)}
.office-size-badge[data-tier="Solo"]{background:#f0f9ff;border-color:#bae6fd;color:#0369a1}
.office-size-badge[data-tier="Boutique"]{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.office-size-badge[data-tier="Mid-size"]{background:#fefce8;border-color:#fde68a;color:#a16207}
.office-size-badge[data-tier="Large"]{background:#fff7ed;border-color:#fed7aa;color:#c2410c}
.office-size-badge[data-tier="Enterprise"]{background:#fdf4ff;border-color:#e9d5ff;color:#7e22ce}

/* ── Step 46: Claim this Office CTA ────────────────────────────────── */
.ov-claim-cta{border-style:dashed!important;font-size:12.5px!important}

/* ── Step 45: Public applicant count chip ──────────────────────────── */
.job-card-appcnt{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted);white-space:nowrap}
.job-card-appcnt i{font-size:11px}

/* ── Step 44: Anonymous screening mode ─────────────────────────────── */
.jv-applicant-anon{display:flex;align-items:center;gap:10px;text-decoration:none;pointer-events:none;cursor:default}
.jv-applicant-anon-avatar{width:38px;height:38px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-muted);font-size:16px}
.jv-kanban-card-head.jv-applicant-anon{padding:0;gap:8px}

/* ── Step 107: Offline banner ───────────────────────────────────────── */
.offline-banner{position:fixed;bottom:0;left:0;right:0;background:#1a2035;border-top:2px solid #ef4444;color:#e8edf8;text-align:center;padding:9px 16px;font-size:13px;font-weight:500;z-index:9999;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.4}

/* ── Step 108: PWA install banner ────────────────────────────────────── */
.pwa-install-banner{position:fixed;bottom:0;left:0;right:0;background:var(--bg-surface);border-top:2px solid var(--gold);color:var(--text);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:9998;flex-wrap:wrap;font-size:13px;font-weight:500}
.pwa-install-banner__text{display:flex;align-items:center;gap:8px;flex:1;min-width:200px}
.pwa-install-banner__actions{display:flex;align-items:center;gap:8px}
.pwa-install-banner__install{padding:6px 18px!important;font-size:13px!important}
.pwa-install-banner__dismiss{padding:6px 14px!important;font-size:13px!important}
@media(max-width:480px){.pwa-install-banner{flex-direction:column;align-items:flex-start}}

/* ── Step 109: Mobile bottom navigation ──────────────────────────────── */
.mobile-bottom-nav{position:fixed;bottom:0;inset-inline:0;height:calc(60px + env(safe-area-inset-bottom));background:var(--bg-surface);border-top:1px solid var(--border);display:none;align-items:center;justify-content:space-around;z-index:1029;padding:0 2px env(safe-area-inset-bottom);transition:transform .28s ease}
.mobile-bottom-nav.is-hidden{transform:translateY(100%)}
/* Bottom bar shows up through 991.98px to cover the tablet/large-phone band
 * where the top nav has already collapsed to a hamburger (no nav dead zone). */
@media(max-width:991.98px){.mobile-bottom-nav{display:flex}}
.mbn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;color:var(--text-muted);text-decoration:none;padding:6px 10px;border-radius:10px;position:relative;cursor:pointer;background:none;border:none;letter-spacing:.01em;transition:color .15s;min-width:44px;min-height:44px}
.mbn-item:hover,.mbn-item.is-active{color:var(--gold);text-decoration:none}
.mbn-item i{font-size:18px}
.mbn-create{background:var(--gold)!important;color:var(--bg)!important;border-radius:50%!important;width:46px!important;height:46px!important;padding:0!important;gap:0!important}
.mbn-create i{font-size:22px}
.mbn-badge{position:absolute;top:4px;inset-inline-end:6px;background:#ef4444;color:#fff;border-radius:10px;font-size:11px;font-weight:800;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;pointer-events:none}
/* Sheet (quick-create) */
.mbn-sheet{position:fixed;inset:0;z-index:1040;display:flex;flex-direction:column;justify-content:flex-end}
.mbn-sheet[hidden]{display:none}
.mbn-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.mbn-sheet-panel{position:relative;background:var(--bg-surface);border-top:1px solid var(--border);border-radius:18px 18px 0 0;padding:10px 0 36px;z-index:1}
.mbn-sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px}
.mbn-sheet-item{display:flex;align-items:center;gap:14px;padding:13px 24px;color:var(--text);text-decoration:none;font-size:15px;font-weight:600;transition:background .12s}
.mbn-sheet-item:hover{background:rgba(255,255,255,.04);color:var(--gold);text-decoration:none}
.mbn-sheet-item i{width:22px;text-align:center;font-size:17px;color:var(--gold)}
/* Push body content above the bottom nav on mobile */
@media(max-width:991.98px){.pb-5{padding-bottom:calc(3rem + 64px + env(safe-area-inset-bottom))!important}footer.footer{padding-bottom:calc(68px + env(safe-area-inset-bottom))}}

/* ── Safe-area: bottom-fixed chrome clears the iOS home indicator (Batch 3).
 * viewport-fit=cover (Batch 0) makes env() resolve to real insets here. ───── */
.offline-banner{padding-bottom:calc(9px + env(safe-area-inset-bottom))}
.pwa-install-banner{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
@media (max-width:991.98px){
  .back-to-top.arch-cta{bottom:calc(60px + env(safe-area-inset-bottom) + 16px)}
}

/* ── Step 110: Touch-target audit & 16px mobile font ─────────────────
 * Apple HIG + Google Material: interactive elements ≥ 44×44 CSS px.
 * iOS Safari auto-zooms inputs with font-size < 16px.
 * ────────────────────────────────────────────────────────────────── */

/* 1. Always-on fix: attach-chip remove button is 22px — bump to 36px.
 *    Stays inside the chip but is now tapable. */
.arch-attach-chip-remove{width:36px;height:36px;font-size:13px}

/* 2. Reply-cancel in message composer: 24px → 36px. */
.arch-composer-reply-cancel{width:36px;height:36px;font-size:12px}

/* 3. Mobile-only fixes (≤767.98px) -------------------------------- */
@media(max-width:767.98px){
  /* iOS input auto-zoom prevention: font must be ≥ 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select{font-size:16px!important}

  /* Expand form inputs to full 44px tap height on mobile */
  .arch-form-shell input[type=text],
  .arch-form-shell input[type=email],
  .arch-form-shell input[type=tel],
  .arch-form-shell input[type=url],
  .arch-form-shell input[type=number],
  .arch-form-shell input[type=date],
  .arch-form-shell input[type=password],
  .arch-form-shell select{height:44px}

  /* Form action buttons (32px → 44px) */
  .form-actions .btn{min-height:44px}

  /* Chat bubble action buttons (28×28 → 44×44) */
  .arch-bubble-action{min-width:44px;min-height:44px}

  /* Reaction picker emoji buttons (32×32 → 38×38, avoids blowing up row) */
  .arch-reaction-pick{min-width:38px;min-height:38px}

  /* Chat search close button (28×28 → 44×44) */
  .arch-chat-search-close{min-width:44px;min-height:44px}

  /* Block-list row checkbox wrapper (28×28 → 44×44) */
  .block-row-check{min-width:44px;min-height:44px}

  /* Group sidebar approve/reject buttons (28×24 → 44×44) */
  .member-row-mini-pending .member-row-mini-approve,
  .member-row-mini-pending .member-row-mini-reject{min-width:44px;min-height:44px;width:auto;height:auto;padding:4px 10px}

  /* Portfolio album icon buttons (30×30 → 44×44) */
  .portfolio-album-icon-btn{min-width:44px;min-height:44px}

  /* Search rail close button — mobile drawer only (28×28 → 44×44) */
  .search-rail-close{min-width:44px;min-height:44px}

  /* Notification dropdown quick-action chips */
  .nav-popover-action-btn{min-height:36px;padding:6px 12px}

  /* Expo vote buttons (≈37px → 44px) */
  .hall-edit-card__actions .arch-btn-ok,
  .hall-edit-card__actions .arch-btn-red{min-height:44px}

  /* Tag / filter chips used as links or buttons */
  a.tag,button.tag,a.chip,button.chip,
  .app-filter-pill,
  .post-tag-link,
  .hall-tag-link{min-height:36px;display:inline-flex;align-items:center}
}

/* iOS focus-zoom prevention on ALL touch devices (incl. tablets/iPad, not
   only <768px): a coarse primary pointer => >=16px text-entry inputs. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea,
  select { font-size: 16px !important; }
}

/* ── Mobile interaction primitives (Batch 2): robust 44px touch targets on the
 * shared button/close/nav/pager primitives the per-class allowlist missed,
 * plus tap feedback for no-hover devices. ──────────────────────────────── */
@media (max-width: 767.98px), (pointer: coarse) {
  .arch-cta, .arch-btn-ghost, .arch-btn-red, .arch-btn-ok, .arch-btn-green { min-height: 44px; }
  .btn-close, .arch-modal-close, .toast-close { min-width: 44px; min-height: 44px; }
  .pager-btn { min-width: 44px; min-height: 44px; }
  .nav-capsule-btn { min-width: 44px; min-height: 44px; }
}
@media (hover: none) {
  .arch-cta:active, .arch-btn-ghost:active, .arch-btn-red:active,
  .arch-btn-ok:active, .arch-btn-green:active,
  .nav-capsule-btn:active, .pager-btn:active { transform: scale(.96); transition: transform .06s ease; }
}

/* Hover-only ACTIONS (revealed by :hover) are invisible/undiscoverable on touch.
 * Surface them permanently where the device cannot hover: group-chat message
 * actions, notification row actions, and dismiss buttons. ─────────────────── */
@media (hover: none) {
  .msg-hover-toolbar, .msg-admin-kebab, .msg-react-add, .msg-reply-btn, .msg-thread-btn,
  .notif-archive-btn, .notif-mute-btn,
  .home-tray-card-dismiss, .home-profile-dismiss, .home-milestone-close {
    opacity: 1 !important; pointer-events: auto !important;
  }
}

/* Prevent scroll-chaining + accidental pull-to-refresh on nested scrollers
 * (modals, overlays, dropdowns, chat panels). ────────────────────────────── */
.proj-gallery-overlay, .auth-card,
.follow-list, .tag-chip-suggest, .arch-new-conv-results, .fp-picker-list,
.arch-starred-list, .chat-pin-panel-list, .chat-search-results, .thread-panel-body,
.blocked-admin-user-modal, .blocked-user-modal, .group-p-members-out,
.post-attachments, .modal-body, .offcanvas-body { overscroll-behavior: contain; }

/* ═══════════════════════════════════════════════════════════════════
   SESSION ADDITIONS — extracted from inline <style> blocks
   Templates: index_guest · index_auth · about · faq · suggested_users
   Honeypot field hide rule
   ═══════════════════════════════════════════════════════════════════ */

/* ── Honeypot field ───────────────────────────────────────────────── */
#div_id_website{display:none!important}

/* ── Anonymous landing — hero, stats, explorer ────────────────────── */
.home-hero{position:relative;z-index:2;padding-block:60px 30px}
.home-hero-logo-wrap{display:inline-block;margin-bottom:24px}
.home-hero-logo{height:68px;opacity:.92}
.home-hero-title{font-size:42px;font-weight:700;color:var(--text-primary);margin:0 0 12px;letter-spacing:.01em;line-height:1.15}
.home-hero-tag{color:var(--text-secondary);margin:0 auto 30px;max-width:48ch;font-size:15.5px;line-height:1.65}
.home-hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:38px}
.home-hero-cta{padding:0 28px;height:46px;font-size:14px}
.home-hero-cta i{font-size:11px;margin-left:4px}
.home-hero-cta-secondary{padding:0 28px;height:46px;display:inline-flex;align-items:center;font-size:14px}

/* ── Mobile button-group consistency (reported on the live mobile site):
 * action groups go uniform-width on phones — primary full-width on top,
 * secondaries even, no mismatched content-widths. ───────────────────────── */
@media (max-width: 575.98px) {
  /* Form actions: primary (Publish/submit) full-width on top, secondaries a 50/50 row below. */
  .arch-form-actions { justify-content: stretch; }
  .arch-form-actions > .arch-cta { order: -1; flex: 1 0 100%; justify-content: center; }
  .arch-form-actions > .arch-btn-ghost,
  .arch-form-actions > .arch-btn-red,
  .arch-form-actions > .arch-btn-ok,
  .arch-form-actions > a:not(.arch-cta) { flex: 1 1 0; min-width: 0; justify-content: center; }
  .arch-form-actions > .arch-form-autosave { order: 2; flex: 1 0 100%; text-align: center; }
  .arch-form-actions > .arch-form-autosave:empty { display: none; }
  /* Hero CTAs: equal full-width, stacked so they follow each other. */
  .home-hero-actions { flex-direction: column; align-items: stretch; }
  .home-hero-cta, .home-hero-cta-secondary { width: 100%; justify-content: center; }
}

/* ── Mobile button-group sweep — extends the same consistency to every other
 * action container the site-wide audit found: per-feature rows, About-page
 * hero/CTA bands, and all modal footers (incl. the global confirm dialog). ── */
@media (max-width: 575.98px) {
  .comment-form-actions, .env-org-form-actions, .cred-form-actions, .ge-form-actions, .resume-save-actions { justify-content: stretch; flex-wrap: wrap; }
  .comment-form-actions > .arch-cta, .env-org-form-actions > .arch-cta, .cred-form-actions > .arch-cta, .ge-form-actions > .arch-cta, .resume-save-actions > .arch-cta { order: -1; flex: 1 0 100%; justify-content: center; }
  .comment-form-actions > .arch-btn-ghost, .comment-form-actions > a:not(.arch-cta),
  .env-org-form-actions > .arch-btn-ghost, .cred-form-actions > .arch-btn-ghost,
  .ge-form-actions > .arch-btn-ghost, .resume-save-actions > .arch-btn-ghost, .resume-save-actions > a:not(.arch-cta) { flex: 1 1 0; min-width: 0; justify-content: center; }
  /* About-page hero + CTA bands — equal full-width stacked. */
  .ab-hero-actions, .ab-cta-band-actions { flex-direction: column; align-items: stretch; }
  .ab-hero-actions > a, .ab-hero-actions > .btn, .ab-cta-band-actions > a, .ab-cta-band-actions > .btn { width: 100%; justify-content: center; margin-inline: 0; }
  /* Modal footers incl. the global confirm dialog: full-width stacked, Cancel at the bottom. */
  .arch-modal-actions, .modal-footer { flex-wrap: wrap; }
  .arch-modal-actions > button, .arch-modal-actions > a, .modal-footer > button, .modal-footer > a { flex: 1 0 100%; justify-content: center; margin-inline: 0; }
  .arch-modal-actions > .arch-btn-ghost, .modal-footer > .arch-btn-ghost { order: 1; }
}

/* Stats row — glassmorphism container. */
.home-hero-stats{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:26px 18px;
  max-width:780px;margin:0 auto;
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:
    0 18px 48px rgba(0,0,0,.42),
    0 0 0 1px rgba(205,161,44,.10),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(205,161,44,.18);
}
[data-theme="light"] .home-hero-stats{
  box-shadow:
    0 4px 16px rgba(0,0,0,.08),
    0 0 0 1px rgba(184,134,42,.12),
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -1px 0 rgba(184,134,42,.10);
}
.home-hero-stats::before{
  content:"";position:absolute;inset:-14px;border-radius:30px;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(205,161,44,.18) 0%,transparent 70%);
  z-index:-1;pointer-events:none;
}
.home-hero-stat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 12px;
  opacity:0;transform:scale(.5) translateY(8px);
  transition:opacity .55s cubic-bezier(.34,1.56,.64,1),transform .55s cubic-bezier(.34,1.56,.64,1);
}
.home-hero-stat.is-popped{opacity:1;transform:scale(1) translateY(0)}
.home-hero-stat:not(:last-child)::after{
  content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 100%);
}
.home-hero-stat-num{font-size:34px;font-weight:700;color:var(--accent);font-family:'Poppins',system-ui,sans-serif;letter-spacing:.01em;line-height:1.1;font-variant-numeric:tabular-nums;transition:text-shadow .4s var(--ease)}
.home-hero-stat-num.is-bursting{animation:home-hero-stat-burst .7s ease-out}
@keyframes home-hero-stat-burst{
  0%{text-shadow:0 0 0 rgba(205,161,44,0)}
  40%{text-shadow:0 0 24px rgba(205,161,44,.85),0 0 8px rgba(205,161,44,.55);transform:scale(1.06)}
  100%{text-shadow:0 0 0 rgba(205,161,44,0);transform:scale(1)}
}
.home-hero-stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.10em;font-weight:600;margin-top:6px}

@media (prefers-reduced-motion: reduce){
  .home-hero-stat{opacity:1;transform:none;transition:none}
  .home-hero-stat-num.is-bursting{animation:none}
}

/* ── Explorer — six gradient cards ────────────────────────────────── */
.home-explorer{margin:48px auto 40px;max-width:980px;padding-inline:14px}
.home-explorer-label{text-align:center;margin-bottom:18px;font-size:11px;letter-spacing:.10em}
.home-explorer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;justify-content:center}
.home-explorer-card{
  display:flex;align-items:flex-start;gap:14px;padding:20px;
  border-radius:var(--radius-lg);text-decoration:none;color:inherit;
  background:color-mix(in srgb, var(--bg-card) 70%, transparent);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  border:1px solid var(--border);
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease),border-color .15s,box-shadow .25s var(--ease),background .25s var(--ease);
}
.home-explorer-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.home-explorer-card:hover::before{opacity:1}
.home-explorer-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.28)}
.home-explorer-icon{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;border:1px solid;position:relative;z-index:1}
.home-explorer-text{position:relative;z-index:1;min-width:0;flex:1}
.home-explorer-title{font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 4px;letter-spacing:.01em}
.home-explorer-blurb{font-size:12.5px;color:var(--text-muted);line-height:1.55;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-explorer-count{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0;display:inline-flex;align-items:center;gap:7px}
.home-explorer-count i{font-size:10px;transition:transform .15s var(--ease)}
.home-explorer-card:hover .home-explorer-count i{transform:translateX(4px)}

.home-explorer-card.is-projects:hover{border-color:rgba(205,161,44,.45)}
.home-explorer-card.is-projects::before{background:linear-gradient(135deg,rgba(205,161,44,.10) 0%,transparent 60%)}
.home-explorer-card.is-projects .home-explorer-icon{background:rgba(205,161,44,.14);color:var(--accent);border-color:rgba(205,161,44,.30)}
.home-explorer-card.is-projects .home-explorer-count{color:var(--accent)}

.home-explorer-card.is-offices:hover{border-color:rgba(205,161,44,.45)}
.home-explorer-card.is-offices::before{background:linear-gradient(135deg,rgba(205,161,44,.10) 0%,transparent 60%)}
.home-explorer-card.is-offices .home-explorer-icon{background:rgba(205,161,44,.14);color:var(--accent);border-color:rgba(205,161,44,.30)}
.home-explorer-card.is-offices .home-explorer-count{color:var(--accent)}

.home-explorer-card.is-posts:hover{border-color:rgba(56,189,248,.45)}
.home-explorer-card.is-posts::before{background:linear-gradient(135deg,rgba(56,189,248,.10) 0%,transparent 60%)}
.home-explorer-card.is-posts .home-explorer-icon{background:rgba(56,189,248,.14);color:#7dd3fc;border-color:rgba(56,189,248,.30)}
.home-explorer-card.is-posts .home-explorer-count{color:#7dd3fc}

.home-explorer-card.is-topics:hover{border-color:rgba(56,189,248,.45)}
.home-explorer-card.is-topics::before{background:linear-gradient(135deg,rgba(56,189,248,.10) 0%,transparent 60%)}
.home-explorer-card.is-topics .home-explorer-icon{background:rgba(56,189,248,.14);color:#7dd3fc;border-color:rgba(56,189,248,.30)}
.home-explorer-card.is-topics .home-explorer-count{color:#7dd3fc}

.home-explorer-card.is-jobs:hover{border-color:rgba(148,163,184,.55)}
.home-explorer-card.is-jobs::before{background:linear-gradient(135deg,rgba(148,163,184,.10) 0%,transparent 60%)}
.home-explorer-card.is-jobs .home-explorer-icon{background:rgba(148,163,184,.14);color:#cbd5e1;border-color:rgba(148,163,184,.32)}
.home-explorer-card.is-jobs .home-explorer-count{color:#cbd5e1}

.home-explorer-card.is-groups:hover{border-color:rgba(192,132,252,.45)}
.home-explorer-card.is-groups::before{background:linear-gradient(135deg,rgba(192,132,252,.10) 0%,transparent 60%)}
.home-explorer-card.is-groups .home-explorer-icon{background:rgba(192,132,252,.14);color:#d8b4fe;border-color:rgba(192,132,252,.32)}
.home-explorer-card.is-groups .home-explorer-count{color:#d8b4fe}

.home-explorer-card.is-hall:hover{border-color:rgba(52,211,153,.45)}
.home-explorer-card.is-hall::before{background:linear-gradient(135deg,rgba(52,211,153,.10) 0%,transparent 60%)}
.home-explorer-card.is-hall .home-explorer-icon{background:rgba(52,211,153,.14);color:#6ee7b7;border-color:rgba(52,211,153,.30)}
.home-explorer-card.is-hall .home-explorer-count{color:#6ee7b7}

.home-explorer-card.is-situ:hover{border-color:rgba(59,130,246,.45)}
.home-explorer-card.is-situ::before{background:linear-gradient(135deg,rgba(59,130,246,.10) 0%,transparent 60%)}
.home-explorer-card.is-situ .home-explorer-icon{background:rgba(59,130,246,.14);color:#93c5fd;border-color:rgba(59,130,246,.30)}
.home-explorer-card.is-situ .home-explorer-count{color:#93c5fd}

.home-explorer-card.is-qa:hover{border-color:rgba(251,146,60,.45)}
.home-explorer-card.is-qa::before{background:linear-gradient(135deg,rgba(251,146,60,.10) 0%,transparent 60%)}
.home-explorer-card.is-qa .home-explorer-icon{background:rgba(251,146,60,.14);color:#fdba74;border-color:rgba(251,146,60,.30)}
.home-explorer-card.is-qa .home-explorer-count{color:#fdba74}

@media (max-width:640px){
  .home-hero{padding-block:40px 20px}
  .home-hero-title{font-size:28px}
  .home-hero-tag{font-size:14px}
  .home-hero-stats{grid-template-columns:repeat(2,1fr);gap:12px 0;padding:18px 14px}
  .home-hero-stat:not(:last-child)::after{display:none}
  .home-hero-stat-num{font-size:28px}
  .home-explorer-grid{grid-template-columns:1fr}
}

/* ── Featured jobs strip (index_auth) ─────────────────────────────── */
.fj-wrap{margin-bottom:24px}
.fj-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fj-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-muted);display:flex;align-items:center;gap:6px}
.fj-label i{color:#6366f1;font-size:13px}
.fj-see-all{font-size:12px;color:var(--color-accent);text-decoration:none;font-weight:600}
.fj-see-all:hover{text-decoration:underline}
.fj-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.fj-scroll::-webkit-scrollbar{display:none}
.fj-card{
  flex:0 0 220px;min-width:220px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:13px 14px;
  text-decoration:none;
  display:flex;flex-direction:column;gap:7px;
  transition:border-color .15s,transform .15s;
}
.fj-card:hover{border-color:var(--border);transform:translateY(-2px)}
[data-theme="light"] .fj-card:hover{border-color:var(--border-hover);}
.fj-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6366f1;background:rgba(99,102,241,.1);border-radius:4px;padding:2px 6px;align-self:flex-start}
.fj-title{font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;flex:1}
.fj-office{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fj-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-dim)}

/* ── Trending posts strip (index_auth) ───────────────────────────── */
.tn-wrap{margin-bottom:24px}
.tn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tn-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-muted);display:flex;align-items:center;gap:6px}
.tn-label i{color:#f97316;font-size:13px}
.tn-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.tn-scroll::-webkit-scrollbar{display:none}
.tn-card{
  flex:0 0 200px;min-width:200px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 13px;
  text-decoration:none;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s,transform .15s;
}
.tn-card:hover{border-color:var(--border);transform:translateY(-2px);}
[data-theme="light"] .tn-card:hover{border-color:var(--border-hover);}
.tn-card-title{
  font-size:13px;font-weight:600;color:var(--text-primary);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  line-height:1.4;flex:1;
}
.tn-card-author{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted)}
.tn-card-av{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}
.tn-card-av-ph{width:20px;height:20px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--accent);flex-shrink:0}
.tn-card-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}
.tn-card-stats{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-dim)}
.tn-card-stats span{display:flex;align-items:center;gap:3px}

/* ── Announcement card + feed tabs + stream (index_auth) ──────────── */
.ann-card{background:color-mix(in srgb,var(--color-accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 40%,transparent);border-radius:12px;padding:16px 18px;margin-bottom:20px}
.ann-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ann-badge{font-size:11px;font-weight:700;color:var(--color-accent);text-transform:uppercase;letter-spacing:.05em}
.ann-badge i{margin-right:5px}
.ann-dismiss{background:none;border:none;color:var(--color-muted);cursor:pointer;padding:2px 4px;line-height:1;font-size:14px;transition:color .15s}
.ann-dismiss:hover{color:var(--color-text)}
.ann-title{display:block;font-size:16px;font-weight:700;color:var(--color-text);text-decoration:none;margin-bottom:6px;line-height:1.35}
.ann-title:hover{color:var(--color-accent)}
.ann-excerpt{font-size:13px;color:var(--color-muted);margin:0 0 10px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ann-foot{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--color-muted)}
.ann-av{width:20px;height:20px;border-radius:50%;object-fit:cover}
.ann-author{font-weight:600;color:var(--color-text)}
.ann-dot{opacity:.4}
.ann-read{margin-left:auto;font-size:12px;color:var(--color-accent);text-decoration:none;font-weight:600;white-space:nowrap}
.ann-read:hover{text-decoration:underline}
.feed-tabs{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:12px}
.feed-tab{padding:9px 18px;font-size:13px;font-weight:600;color:var(--color-muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;white-space:nowrap}
.feed-tab:hover{color:var(--color-text)}
.feed-tab.is-active{color:var(--color-accent);border-bottom-color:var(--color-accent)}
.topic-strip{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;margin-bottom:14px;scrollbar-width:none}
.topic-strip::-webkit-scrollbar{display:none}
.topic-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;text-decoration:none;color:var(--color-muted);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:background .15s,color .15s,border-color .15s;flex-shrink:0}
.topic-chip:hover,.topic-chip.is-active{background:color-mix(in srgb,var(--color-accent) 15%,transparent);color:var(--color-accent);border-color:color-mix(in srgb,var(--color-accent) 40%,transparent)}
.topic-chip--add{color:var(--color-muted);border-style:dashed}
.topic-chip--add:hover{border-style:solid}
.home-stream{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.home-stream-card{background:color-mix(in srgb,var(--color-surface-alt) 60%,transparent);border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--stream-accent,var(--color-accent));border-radius:10px;padding:14px 16px;transition:background .18s}
.home-stream-card:hover{background:color-mix(in srgb,var(--color-surface-alt) 85%,transparent)}
.home-stream-card[data-card-url]{cursor:pointer}
.home-stream-card.is-post{--stream-accent:var(--color-accent)}
.home-stream-card.is-project{--stream-accent:#b8972e}
.home-stream-actor{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:13px;color:var(--color-muted);flex-wrap:wrap}
.home-stream-actor-av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}
.home-stream-actor-name{font-weight:600;color:var(--color-text);text-decoration:none}
.home-stream-actor-name:hover{text-decoration:underline}
.home-stream-actor-dot{opacity:.35}
.home-stream-actor-time{opacity:.5;font-size:12px}
.home-stream-title{font-size:15px;font-weight:600;color:var(--color-text);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:5px}
.home-stream-title a{color:inherit;text-decoration:none}
.home-stream-title a:hover{text-decoration:underline}
.home-stream-excerpt{font-size:13px;color:var(--color-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-bottom:8px}
.home-stream-foot{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--color-muted)}
.home-stream-foot-stat{display:flex;align-items:center;gap:4px}
.home-stream-foot-stat i{font-size:11px;opacity:.7}
.home-stream-read{margin-left:auto;font-size:12px;color:var(--color-accent);text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap}
.home-stream-read:hover{text-decoration:underline}
.home-stream-card.is-project .home-stream-inner{display:flex;gap:12px;align-items:flex-start}
.home-stream-proj-thumb{width:72px;height:54px;border-radius:6px;object-fit:cover;flex-shrink:0}
.home-stream-proj-body{flex:1;min-width:0}
.home-stream-proj-meta{font-size:12px;color:var(--color-muted);margin-bottom:6px}
.home-stream-item{display:flex;align-items:center;gap:8px;padding:9px 13px;background:color-mix(in srgb,var(--color-surface-alt) 35%,transparent);border:1px solid rgba(255,255,255,.05);border-radius:8px;font-size:13px;color:var(--color-muted)}
.home-stream-item a{color:var(--color-accent);text-decoration:none}
.home-stream-item a:hover{text-decoration:underline}
.home-stream-item-time{margin-left:auto;opacity:.45;font-size:12px;white-space:nowrap;padding-left:8px}

/* ── Logged-in welcome — greeting banner ──────────────────────────── */
@property --home-edge-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
@property --home-edge-angle-inner{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
@property --inner-glow{
  syntax:"<color>";
  initial-value:rgb(205,161,44);
  inherits:true;
}
.home-welcome{
  position:relative;
  background:linear-gradient(135deg,
    var(--bg-deep) 0%,
    color-mix(in srgb,var(--bg-deep) 74%,rgba(205,161,44,.9) 26%) 55%,
    color-mix(in srgb,var(--bg-deep) 60%,rgba(205,161,44,.9) 40%) 100%
  );
  border:1px solid rgba(205,161,44,.38);
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
  min-height:120px;
}
.home-welcome-mesh{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
}
.home-welcome-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,14,20,.72) 0%,rgba(14,14,20,.48) 55%,rgba(14,14,20,.20) 100%);
}
[data-theme="light"] .home-welcome{
  background:linear-gradient(135deg,
    #fdfbf5 0%,
    color-mix(in srgb,#fdfbf5 80%,rgba(205,161,44,1) 20%) 60%,
    color-mix(in srgb,#fdfbf5 66%,rgba(205,161,44,1) 34%) 100%
  );
  border-color:rgba(205,161,44,.35);
  box-shadow:0 2px 24px rgba(205,161,44,.10),0 1px 3px rgba(0,0,0,.06);
}
[data-theme="light"] .home-welcome-overlay{
  background:linear-gradient(90deg,rgba(205,161,44,.05) 0%,transparent 65%);
}
[data-theme="light"] .home-welcome-guide{
  background:rgba(205,161,44,.07);
  border-left-color:rgba(205,161,44,.22);
}
.home-welcome-inner{
  position:relative;z-index:2;
  display:flex;align-items:stretch;
}
.home-welcome-left{
  flex:3;min-width:0;overflow:hidden;
  display:flex;align-items:center;gap:18px;
  padding:26px 28px;
}
.home-welcome-text{flex:1;min-width:0;}
.home-welcome-greeting{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 5px;
}
.home-welcome-name{
  /* Fluid + smaller than the old fixed 36px so longer names fit the narrow
     greeting column instead of truncating after a few characters. Scales with
     viewport (the column widens with it); ellipsis below is only a last resort. */
  font-size:clamp(20px, 1.6vw, 26px);font-weight:800;color:var(--text-primary);
  margin:0 0 12px;letter-spacing:-.02em;line-height:1.05;
  text-shadow:0 2px 36px rgba(205,161,44,.22);
  /* H-21 — clamp long names to one line with an ellipsis instead of
     letting them bleed past the card and get hard-clipped. */
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.home-welcome-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.home-welcome-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 11px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  font-size:11px;color:var(--text-muted);white-space:nowrap;
}
.home-welcome-chip--role{
  background:rgba(205,161,44,.11);border-color:rgba(205,161,44,.22);
  color:var(--accent);
}
.home-welcome-ava{position:relative;flex-shrink:0;cursor:pointer;}
.home-welcome-ava-img{
  width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid rgba(205,161,44,.35);
  box-shadow:0 0 0 5px rgba(205,161,44,.07),0 8px 32px rgba(0,0,0,.45);
  animation:hwAvaBreath 3s ease-in-out infinite;
}
@keyframes hwAvaBreath{
  0%,100%{box-shadow:0 0 0 3px rgba(205,161,44,.10),0 0 12px rgba(205,161,44,.18),0 6px 24px rgba(0,0,0,.4);}
  50%{box-shadow:0 0 0 6px rgba(205,161,44,.20),0 0 28px rgba(205,161,44,.40),0 8px 32px rgba(0,0,0,.45);}
}
.home-welcome-ava-ring{
  position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(205,161,44,.20);
  animation:hwRingPulse 3s ease-in-out infinite;
}
@keyframes hwRingPulse{
  0%,100%{opacity:.35;transform:scale(1);}
  50%{opacity:.85;transform:scale(1.05);}
}
/* ── Site guide panel (right column) ─────────────────────────────── */
.home-welcome-guide{
  flex:10;min-width:0;
  border-left:1px solid rgba(205,161,44,.14);
  background:rgba(0,0,0,.18);
  padding:0;
  display:flex;flex-direction:row;
}
.hw-quote-col{
  flex:5;min-width:0;overflow:hidden;
  padding:20px 22px 20px 16px;
  border-left:1px solid rgba(205,161,44,.10);
  display:flex;flex-direction:column;justify-content:center;
}
.hw-quote-eyebrow{
  font-size:9px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:rgba(205,161,44,.5);margin:0 0 9px;
  display:flex;align-items:center;gap:5px;
}
.hw-quote-text{
  font-size:13px;font-style:italic;color:var(--text-secondary);
  margin:0 0 6px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}
.hw-quote-author{
  font-size:10px;color:rgba(205,161,44,.75);margin:0 0 10px;font-weight:600;
}
.hw-quote-see-all{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(205,161,44,.55);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;
  transition:color .14s;
}
.hw-quote-see-all:hover{color:var(--accent);}
.hw-quote-see-all i{font-size:8px;transition:transform .14s var(--ease);}
.hw-quote-see-all:hover i{transform:translateX(3px);}
.hw-links-col{
  flex:5;min-width:0;overflow:hidden;padding:20px 22px;display:flex;flex-direction:column;
}
.home-welcome-guide-head{
  font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:rgba(205,161,44,.65);margin:0 0 10px;
  display:flex;align-items:center;gap:6px;
}
.home-welcome-guide-list{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2px;list-style:none;margin:0;padding:0;flex:1;
  align-content:start;
}
.hw-gi{
  display:flex;align-items:center;gap:7px;
  padding:6px 8px;border-radius:7px;
  color:var(--text-secondary);font-size:12px;
  text-decoration:none;
  transition:background .14s,color .14s;
  white-space:nowrap;overflow:hidden;
}
.hw-gi:hover{background:rgba(205,161,44,.11);color:var(--accent);text-decoration:none;}
.hw-gi-icon{font-size:11px;width:14px;text-align:center;flex-shrink:0;color:rgba(205,161,44,.6);}
.hw-gi:hover .hw-gi-icon{color:var(--accent);}
.hw-gi-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.hw-gi-badge{
  flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.04em;
  padding:1px 5px;border-radius:99px;line-height:1.6;text-transform:uppercase;
}
.hw-gi-badge--urgent{background:rgba(239,68,68,.20);color:#f87171;}
.hw-gi-badge--warn{background:rgba(234,179,8,.18);color:#fcd34d;}
.hw-gi-badge--trend{background:rgba(56,189,248,.16);color:#7dd3fc;}
.hw-gi-badge--info{background:rgba(205,161,44,.14);color:rgba(205,161,44,.9);}
@media (max-width:1060px){
  .home-welcome-guide-list{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:860px){
  .home-welcome-guide{flex:0 0 280px;}
  .hw-quote-col{display:none;}
  .hw-links-col{padding:14px 18px;}
  .home-welcome-guide-list{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .home-welcome-inner{flex-direction:column;}
  .home-welcome-left{padding:18px 18px 14px;}
  .home-welcome-name{font-size:22px;}
  .home-welcome-ava-img{width:56px;height:56px;}
  .home-welcome-guide{flex:none;border-left:none;border-top:1px solid rgba(205,161,44,.12);flex-direction:column;}
  .hw-quote-col{display:none;}
  .hw-links-col{padding:14px 18px;}
  .home-welcome-guide-list{grid-template-columns:1fr 1fr 1fr;}
}
[data-theme="light"] .home-welcome-chip{
  background:rgba(205,161,44,.08);
  border-color:rgba(205,161,44,.18);
}
[data-theme="light"] .home-welcome-chip--role{
  background:rgba(205,161,44,.14);
  border-color:rgba(205,161,44,.28);
  color:var(--accent);
}
[data-theme="light"] .home-welcome-guide-head{color:var(--accent);}
[data-theme="light"] .hw-gi-icon{color:var(--accent-active);}

/* ── "For you" sidebar tray ─────────────────────────────────────── */
.home-tray-sb-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.home-tray-sb-see-all{
  font-size:11.5px;font-weight:600;color:var(--text-muted);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;
  transition:color .15s;
}
.home-tray-sb-see-all:hover{color:var(--accent)}
.home-tray-sb-see-all i{font-size:9px;transition:transform .15s var(--ease)}
.home-tray-sb-see-all:hover i{transform:translateX(3px)}
.home-tray-sb-row{
  display:flex;align-items:center;gap:9px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.home-tray-sb-row:last-child{border-bottom:none;padding-bottom:0}
.home-tray-sb-row[data-card-url]{cursor:pointer}
.home-tray-sb-glyph{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;color:var(--accent);
}
.home-tray-sb-av{width:100%;height:100%;object-fit:cover;border-radius:50%}
.home-tray-sb-body{flex:1;min-width:0}
.home-tray-sb-title{
  font-size:12.5px;font-weight:600;color:var(--text-primary);
  margin:0 0 2px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.home-tray-initials{font-size:12px;font-weight:700;color:var(--accent);font-family:'Cormorant Garamond',serif}
.home-tray-card-go{
  font-size:11px;font-weight:600;color:var(--accent);
  text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;
  letter-spacing:.03em;transition:color .15s;
}
.home-tray-card-go:hover{color:var(--accent-active)}
.home-tray-card-go i{font-size:9px;transition:transform .15s var(--ease)}
.home-tray-card-go:hover i{transform:translateX(3px)}
.home-tray-card-dismiss{
  background:none;border:none;padding:2px 4px;cursor:pointer;
  color:var(--text-muted);font-size:11px;border-radius:4px;
  opacity:.4;flex-shrink:0;
  transition:opacity .15s,color .15s,background .15s;line-height:1;
}
.home-tray-card-dismiss:hover{opacity:1;color:var(--text-primary);background:rgba(255,255,255,.08)}

/* ── People you may know ─────────────────────────────────────────── */
.pymk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pymk-see-all{font-size:11.5px;font-weight:600;color:var(--text-muted);text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .15s}
.pymk-see-all:hover{color:var(--accent)}
.pymk-see-all i{font-size:9px;transition:transform .15s var(--ease)}
.pymk-see-all:hover i{transform:translateX(3px)}
.pymk-list{display:flex;flex-direction:column;gap:0}
.pymk-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.pymk-row:last-child{border-bottom:none;padding-bottom:0}
.pymk-av-wrap{flex-shrink:0;text-decoration:none}
.pymk-av{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}
.pymk-av-init{display:flex;align-items:center;justify-content:center;background:rgba(205,161,44,.14);border:1px solid rgba(205,161,44,.25);font-size:14px;font-weight:700;color:var(--accent)}
.pymk-info{flex:1;min-width:0}
.pymk-name{display:block;font-size:13px;font-weight:600;color:var(--text-primary);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.pymk-name:hover{color:var(--accent)}
.pymk-sub{font-size:11px;color:var(--text-muted);margin:1px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pymk-view{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:var(--text-muted);font-size:10px;text-decoration:none;transition:background .15s,color .15s}
.pymk-view:hover{background:rgba(205,161,44,.15);color:var(--accent)}

/* ── Two-column home body ─────────────────────────────────────────── */
.home-body{
  display:flex;align-items:flex-start;gap:24px;
}
.home-feed-main{
  flex:1;min-width:0;
}
.home-feed-sidebar{
  width:272px;flex-shrink:0;
  display:flex;flex-direction:column;gap:14px;
  position:sticky;top:72px;
  max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);
  overflow-y:auto;
  scrollbar-width:none;
}
.home-feed-sidebar::-webkit-scrollbar{display:none}
@media (max-width:1100px){.home-feed-sidebar{width:232px}}
@media (max-width:860px){
  .home-body{flex-direction:column}
  /* H-08 — feed is the primary content; lift it above the stacked sidebar
     widgets on mobile instead of burying it below all of them. */
  /* width:100% — the parent is align-items:flex-start, so in the stacked
     (column) layout the feed column would otherwise shrink to its content
     width and read as narrower than the full-width sidebar cards. */
  .home-feed-main{order:-1;width:100%}
  .home-feed-sidebar{width:100%;position:static;max-height:none;overflow-y:visible}
}

/* ── Sidebar blocks ───────────────────────────────────────────────── */
.home-sidebar-block{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:15px 17px;
  flex-shrink:0;
}
.home-sidebar-block .sec-label{margin-bottom:10px}
.home-sidebar-links{display:flex;flex-direction:column;gap:1px}
.home-sidebar-link{
  display:flex;align-items:center;gap:10px;
  padding:7px 8px;border-radius:var(--radius);
  text-decoration:none;color:var(--text-secondary);font-size:13px;
  transition:background .15s,color .15s;
}
.home-sidebar-link:hover{background:rgba(255,255,255,.06);color:var(--text-primary)}
.home-sidebar-link i:first-child{width:15px;text-align:center;color:var(--text-muted);font-size:12px;flex-shrink:0}
.home-sidebar-link span{flex:1}
.home-sidebar-link-arr{font-size:9px;color:var(--text-muted);opacity:0;transition:opacity .15s,transform .15s var(--ease)}
.home-sidebar-link:hover .home-sidebar-link-arr{opacity:1;transform:translateX(3px)}
.home-qa-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.home-qa-ask-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 11px;border-radius:99px;
  background:rgba(96,165,250,.12);color:#60a5fa;
  border:1px solid rgba(96,165,250,.28);
  font-size:11.5px;font-weight:700;text-decoration:none;
  transition:background .14s,border-color .14s;
}
.home-qa-ask-btn:hover{background:rgba(96,165,250,.22);border-color:rgba(96,165,250,.50)}
.home-qa-list{display:flex;flex-direction:column;gap:1px;margin-bottom:10px}
.home-qa-row{
  display:flex;flex-direction:column;gap:3px;
  padding:7px 6px;border-radius:8px;text-decoration:none;
  transition:background .14s;
}
.home-qa-row:hover{background:rgba(255,255,255,.05)}
.home-qa-row-title{font-size:12.5px;font-weight:600;color:var(--text-primary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-qa-row-meta{font-size:11px;display:flex;gap:8px;margin-top:1px}
.home-qa-answered{color:#4ade80;font-weight:600}
.home-qa-unanswered{color:var(--text-muted)}
.home-qa-foot{display:block;font-size:12px;color:var(--accent);text-decoration:none;margin-top:6px;font-weight:600}
.home-qa-foot:hover{text-decoration:underline}
.home-sidebar-network{display:flex;gap:18px;margin-bottom:12px}
.home-sidebar-net-stat{display:flex;flex-direction:column;align-items:flex-start}
.home-sidebar-net-num{font-size:21px;font-weight:700;color:var(--text-primary);line-height:1.1}
.home-sidebar-net-lbl{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:2px}
.home-sidebar-profile-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--accent);
  text-decoration:none;
  transition:color .15s;
}
.home-sidebar-profile-link:hover{color:var(--accent-active)}
.home-sidebar-profile-link i{font-size:10px;transition:transform .15s var(--ease)}
.home-sidebar-profile-link:hover i{transform:translateX(3px)}
.home-sidebar-divider{border:none;border-top:1px solid rgba(255,255,255,.07);margin:10px 0}
.home-sidebar-explore{display:flex;flex-wrap:wrap;gap:6px}
.home-sidebar-explore-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;
  font-size:11.5px;font-weight:600;
  text-decoration:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text-secondary);
  transition:background .15s,border-color .15s,color .15s;
}
.home-sidebar-explore-link:hover{background:rgba(255,255,255,.07);color:var(--text-primary)}
.home-sidebar-explore-link.is-projects:hover{border-color:rgba(205,161,44,.5);color:var(--accent)}
.home-sidebar-explore-link.is-posts:hover{border-color:rgba(56,189,248,.5);color:#7dd3fc}
.home-sidebar-explore-link.is-offices:hover{border-color:rgba(205,161,44,.5);color:var(--accent)}
.home-sidebar-explore-link.is-groups:hover{border-color:rgba(192,132,252,.5);color:#d8b4fe}
.home-sidebar-explore-link.is-topics:hover{border-color:rgba(56,189,248,.5);color:#7dd3fc}
.home-sidebar-explore-link.is-jobs:hover{border-color:rgba(148,163,184,.5);color:#cbd5e1}
.home-trending-list{display:flex;flex-direction:column;gap:1px}
.home-trending-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 4px;border-radius:6px;
  text-decoration:none;
  transition:background .15s;
}
.home-trending-row:hover{background:rgba(255,255,255,.05)}
.home-trending-tag{font-size:13px;font-weight:600;color:var(--color-accent)}
.home-trending-count{font-size:11px;color:var(--color-muted);opacity:.7}
.home-hot-title{
  display:block;font-size:13.5px;font-weight:600;color:var(--color-text);
  line-height:1.4;text-decoration:none;margin-bottom:9px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.home-hot-title:hover{text-decoration:underline}
.home-hot-meta{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--color-muted);margin-bottom:8px;
}
.home-hot-av{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}
.home-hot-stats{
  display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--color-muted);
}
.home-hot-stats i{font-size:11px;opacity:.7;margin-right:3px}
.home-hot-cta{
  margin-left:auto;font-size:12px;color:var(--color-accent);
  text-decoration:none;display:flex;align-items:center;gap:4px;
}
.home-hot-cta:hover{text-decoration:underline}
.home-profile-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.home-profile-level{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
}
.home-profile-dismiss{
  background:none;border:none;cursor:pointer;
  color:var(--text-muted);font-size:18px;line-height:1;padding:0 2px;
  opacity:.45;transition:opacity .15s;
}
.home-profile-dismiss:hover{opacity:1}
.home-profile-bar-wrap{height:7px;border-radius:4px;background:rgba(255,255,255,.13);margin-bottom:8px;overflow:hidden}
[data-theme="light"] .home-profile-bar-wrap{background:rgba(0,0,0,.1);}
.home-profile-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#7dd3fc));transition:width .5s ease}
.home-profile-pct{font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.home-profile-nudge{font-size:13px;color:var(--text-primary);line-height:1.4;margin-bottom:13px}
.home-profile-cta{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;padding:8px 14px;width:100%;box-sizing:border-box}
.home-saved-list{display:flex;flex-direction:column;gap:2px}
.home-saved-row{display:flex;align-items:center;gap:6px;padding:6px 2px;border-radius:5px}
.home-saved-name{font-size:13px;color:var(--color-text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-saved-bell{font-size:10px;color:var(--color-accent);flex-shrink:0}
.home-saved-run{font-size:12px;color:var(--color-accent);text-decoration:none;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:3px}
.home-saved-run:hover{text-decoration:underline}
.home-saved-all{display:block;margin-top:6px;font-size:12px;color:var(--color-muted);text-decoration:none;padding:4px 2px}
.home-saved-all:hover{color:var(--color-accent)}
.home-discover-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.home-discover-card{
  position:relative;border-radius:10px;overflow:hidden;
  display:block;text-decoration:none;
  aspect-ratio:4/3;background:var(--bg-card);
}
.home-discover-img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;display:block}
.home-discover-card:hover .home-discover-img{transform:scale(1.05)}
.home-discover-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:32px;color:var(--text-secondary);
  background:color-mix(in srgb,var(--color-accent) 8%,var(--bg-card));
}
.home-discover-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:32px 12px 11px;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
  color:#fff;
  opacity:0;transform:translateY(6px);
  transition:opacity .22s,transform .22s;
}
.home-discover-card:hover .home-discover-overlay,
.home-discover-card:focus-within .home-discover-overlay{opacity:1;transform:translateY(0)}
.home-discover-title{
  font-size:13px;font-weight:700;line-height:1.3;margin-bottom:5px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.home-discover-meta{
  display:flex;align-items:center;gap:5px;
  font-size:11px;opacity:.88;margin-bottom:4px;flex-wrap:wrap;
}
.home-discover-av{width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0}
.home-discover-sep{opacity:.45}
.home-discover-stats{display:flex;gap:10px;font-size:11px;opacity:.78}
.home-discover-stats i{font-size:10px;margin-right:2px}
.home-spotlight-cover-wrap{display:block;border-radius:7px;overflow:hidden;margin-bottom:10px}
.home-spotlight-cover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .3s ease}
.home-spotlight-cover-wrap:hover .home-spotlight-cover{transform:scale(1.03)}
.home-spotlight-title{
  display:block;font-size:13.5px;font-weight:600;color:var(--color-text);
  line-height:1.4;text-decoration:none;margin-bottom:8px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.home-spotlight-title:hover{text-decoration:underline}
.home-spotlight-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.home-spotlight-author{font-size:12px;color:var(--color-muted);text-decoration:none}
.home-spotlight-author:hover{color:var(--color-accent)}
.home-milestone{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--color-accent) 14%,var(--bg-card)),
    color-mix(in srgb,var(--color-accent) 6%,var(--bg-card)));
  border:1px solid color-mix(in srgb,var(--color-accent) 30%,transparent);
  border-radius:12px;padding:14px 16px 18px;
  margin-bottom:16px;
  animation:milestoneIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes milestoneIn{
  from{opacity:0;transform:translateY(-12px) scale(.97)}
  to{opacity:1;transform:none}
}
.home-milestone-inner{display:flex;align-items:flex-start;gap:12px;position:relative;z-index:1}
.home-milestone-icon{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--color-accent) 20%,transparent);
  color:var(--color-accent);font-size:17px;
}
.home-milestone-text{flex:1;min-width:0}
.home-milestone-label{font-size:14px;font-weight:700;color:var(--color-text);margin-bottom:2px}
.home-milestone-body{font-size:13px;color:var(--color-muted)}
.home-milestone-close{
  background:none;border:none;cursor:pointer;padding:2px 4px;
  color:var(--color-muted);opacity:.6;font-size:14px;transition:opacity .15s;flex-shrink:0;
}
.home-milestone-close:hover{opacity:1}
.home-milestone-progress{
  position:absolute;bottom:0;left:0;height:3px;
  background:var(--color-accent);border-radius:0 0 2px 2px;
  animation:milestoneBar 5s linear forwards;
  transform-origin:left;
}
@keyframes milestoneBar{from{width:100%}to{width:0%}}
.home-milestone-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.home-milestone-confetti span{
  position:absolute;top:-10px;
  width:6px;height:6px;border-radius:1px;
  animation:confettiFall linear forwards;
  opacity:.9;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:.9}
  100%{transform:translateY(80px) rotate(360deg);opacity:0}
}
.home-welcome-chip i{font-size:10px;}

/* ── About page ───────────────────────────────────────────────────── */
.ab-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--bg-deep);
  border:1px solid rgba(205,161,44,.35);
  border-radius:22px;
  padding:64px 40px 56px;
  text-align:center;
  margin-bottom:36px;
}
[data-theme="light"] .ab-hero{
  background:#0e0f16;
  border-color:rgba(205,161,44,.40);
}
.ab-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;}
.ab-hero-inner{position:relative;z-index:1;}
.ab-hero-logo{height:40px;opacity:.85;margin-bottom:28px;display:block;margin-left:auto;margin-right:auto;}
.ab-hero-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;
}
.ab-hero-title{
  font-size:clamp(26px,4vw,44px);font-weight:800;
  color:var(--text-primary);margin:0 0 16px;
  letter-spacing:-.03em;line-height:1.1;
}
.ab-hero-title span{color:var(--accent);}
.ab-hero-sub{
  font-size:15px;color:var(--text-secondary);margin:0 auto 32px;
  max-width:560px;line-height:1.7;
}
.ab-hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.ab-stats{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;margin-bottom:36px;
}
@media(max-width:900px){.ab-stats{grid-template-columns:repeat(4,1fr);}}
@media(max-width:540px){.ab-stats{grid-template-columns:repeat(2,1fr);}}
.ab-stat{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px 12px;text-align:center;
  transition:border-color .2s,box-shadow .2s;
}
.ab-stat:hover{border-color:rgba(205,161,44,.35);box-shadow:0 4px 16px rgba(205,161,44,.10);}
[data-theme="dark"] .ab-stat{border-color:rgba(205,161,44,.15);}
.ab-stat-num{
  font-size:26px;font-weight:800;color:var(--accent);
  margin:0 0 4px;letter-spacing:-.03em;line-height:1;
}
.ab-stat-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0;}
.ab-section{margin-bottom:36px;}
.ab-section-head{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.ab-section-head-icon{
  width:32px;height:32px;border-radius:8px;
  background:rgba(205,161,44,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--accent);flex-shrink:0;
}
.ab-section-title{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0;}
.ab-mission{
  background:var(--bg-card);border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-md);
  padding:28px 32px;
  font-size:15px;line-height:1.8;color:var(--text-secondary);
}
[data-theme="dark"] .ab-mission{border-color:rgba(205,161,44,.18);border-left-color:var(--accent);}
.ab-mission strong{color:var(--text-primary);}
.ab-features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
@media(max-width:900px){.ab-features{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.ab-features{grid-template-columns:1fr;}}
.ab-feat{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px 18px;
  transition:border-color .2s,transform .25s,box-shadow .2s;
}
.ab-feat:hover{
  border-color:rgba(205,161,44,.35);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.22),0 0 0 1px rgba(205,161,44,.15);
}
[data-theme="dark"] .ab-feat{border-color:rgba(205,161,44,.12);}
.ab-feat-icon{
  width:38px;height:38px;border-radius:10px;margin-bottom:12px;
  background:rgba(205,161,44,.10);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--accent);
  transition:background .2s;
}
.ab-feat:hover .ab-feat-icon{background:rgba(205,161,44,.20);}
.ab-feat-name{font-size:13px;font-weight:700;color:var(--text-primary);margin:0 0 5px;}
.ab-feat-desc{font-size:11.5px;color:var(--text-muted);margin:0;line-height:1.55;}
.ab-creator{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:24px 28px;
  display:flex;align-items:center;gap:20px;
}
[data-theme="dark"] .ab-creator{border-color:rgba(205,161,44,.18);}
.ab-creator-monogram{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:rgba(205,161,44,.14);
  border:2px solid rgba(205,161,44,.30);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:var(--accent);
}
.ab-creator-name{font-size:15px;font-weight:700;color:var(--text-primary);margin:0 0 3px;}
.ab-creator-role{font-size:11.5px;color:var(--text-muted);margin:0;}
.ab-creator-years{font-size:11px;color:rgba(205,161,44,.65);margin:6px 0 0;font-weight:600;}
.ab-cta-band{
  background:var(--bg-card);border:1px solid rgba(205,161,44,.22);
  border-radius:var(--radius-md);
  padding:32px 28px;text-align:center;margin-top:12px;
}
.ab-cta-band-title{font-size:20px;font-weight:800;color:var(--text-primary);margin:0 0 8px;letter-spacing:-.02em;}
.ab-cta-band-sub{font-size:13px;color:var(--text-muted);margin:0 0 22px;}
.ab-cta-band-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}

/* ── FAQ page ─────────────────────────────────────────────────────── */
.faq-wrap{max-width:860px;margin:0 auto;padding:32px 0 56px;}
.faq-hero{
  text-align:center;margin-bottom:32px;
}
.faq-hero-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;
}
.faq-hero-title{
  font-size:28px;font-weight:800;color:var(--text-primary);
  margin:0 0 10px;letter-spacing:-.02em;
}
.faq-hero-sub{font-size:13px;color:var(--text-muted);margin:0 0 24px;}
.faq-search-wrap{
  position:relative;max-width:480px;margin:0 auto;
}
.faq-search-wrap i{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--text-dim,#6e7681);pointer-events:none;
}
.faq-search{
  width:100%;padding:10px 14px 10px 38px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:13px;color:var(--text-primary);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.faq-search:focus{border-color:rgba(205,161,44,.50);box-shadow:0 0 0 3px rgba(205,161,44,.10);}
.faq-search::placeholder{color:var(--text-dim,#6e7681);}
.faq-no-results{display:none;text-align:center;padding:40px 0;color:var(--text-muted);font-size:13px;}
.faq-no-results.visible{display:block;}
.faq-cats{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px;
}
.faq-cat{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;border-radius:20px;font-size:11.5px;font-weight:600;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-muted);cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
  user-select:none;
}
.faq-cat:hover{border-color:rgba(205,161,44,.35);color:var(--text-primary);}
.faq-cat.active{
  background:rgba(205,161,44,.12);
  border-color:rgba(205,161,44,.40);
  color:var(--accent);
}
.faq-cat i{font-size:10px;}
.faq-section{margin-bottom:10px;}
.faq-section-head{
  display:flex;align-items:center;gap:10px;
  margin:28px 0 10px;
}
.faq-section-head-icon{
  width:30px;height:30px;border-radius:8px;
  background:rgba(205,161,44,.10);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--accent);flex-shrink:0;
}
.faq-section-title{
  font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--text-muted);margin:0;
}
.faq-item{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:6px;
  overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.faq-item:hover{border-color:rgba(205,161,44,.25);}
.faq-item.open{border-color:rgba(205,161,44,.35);box-shadow:0 4px 16px rgba(205,161,44,.07);}
[data-theme="dark"] .faq-item{border-color:rgba(205,161,44,.12);}
[data-theme="dark"] .faq-item.open{border-color:rgba(205,161,44,.30);}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;
  cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--text-primary);
  user-select:none;
  transition:color .14s;
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:hover{color:var(--accent);}
.faq-item.open .faq-q{color:var(--accent);}
.faq-chev{
  font-size:11px;color:var(--text-muted);flex-shrink:0;
  transition:transform .22s var(--ease,cubic-bezier(.4,0,.2,1)),color .14s;
}
.faq-item.open .faq-chev{transform:rotate(180deg);color:var(--accent);}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .28s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-a{max-height:600px;}
.faq-a-inner{
  padding:0 18px 16px;
  font-size:13px;line-height:1.75;color:var(--text-secondary);
  border-top:1px solid rgba(205,161,44,.08);
  padding-top:12px;
}
.faq-a-inner a{color:var(--accent);text-decoration:none;}
.faq-a-inner a:hover{text-decoration:underline;}
.faq-a-inner strong{color:var(--text-primary);}
.faq-item.faq-hidden{display:none;}
.faq-cta{
  background:var(--bg-card);border:1px solid rgba(205,161,44,.22);
  border-radius:var(--radius-md);
  padding:28px 24px;text-align:center;margin-top:36px;
}
.faq-cta-title{font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 6px;}
.faq-cta-sub{font-size:12.5px;color:var(--text-muted);margin:0 0 18px;}

/* ── Suggested users page ─────────────────────────────────────────── */
.su-av-wrap{display:inline-block;border-radius:50%}
.su-av-wrap img{display:block;border-radius:50%}

/* ── /suggested-users/ full-page card grid ─────────────────────────── */
.suc-card{
  display:flex;flex-direction:column;gap:10px;width:100%;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:14px 16px;
  transition:border-color .15s,box-shadow .2s,transform .2s ease;
}
.suc-card:hover{
  border-color:rgba(205,161,44,.3);
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transform:translateY(-2px);
}
.suc-card.su-followed{border-color:var(--success,#3fb950)!important}
.suc-link{display:flex;align-items:center;gap:12px;text-decoration:none;flex:1}
.suc-av{flex-shrink:0;display:inline-block}
.suc-av img{width:52px;height:52px;border-radius:50%;object-fit:cover;display:block}
.suc-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.suc-name{
  display:block;font-size:13px;font-weight:700;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .15s;
}
.suc-link:hover .suc-name{color:var(--accent)}
.suc-sub{
  display:block;font-size:11.5px;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.suc-line{
  display:block;font-size:11px;color:var(--text-dim,#6e7681);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Availability status dot — shared across all avatar wrappers ─ */
.avail-dot-wrap{position:relative}
.avail-dot-wrap::after{
  content:'';
  position:absolute;
  bottom:3px;
  inset-inline-end:3px;
  width:10px;height:10px;
  border-radius:50%;
  border:2px solid var(--bg-card);
  z-index:3;
  transition:transform .2s ease;
}
.avail-dot-wrap:hover::after{transform:scale(1.2)}
.avail-dot--open_to_work::after{background:#22c55e}
.avail-dot--open_to_hire::after{background:#3b82f6}
.avail-dot--open_to_collaborate::after{background:#a855f7}
.pymk-av-wrap.avail-dot-wrap::after{width:8px;height:8px;bottom:1px;inset-inline-end:1px}

/* ── Required field star ──────────────────────────────────────────────────── */
/* .req-star — injected by base.html JS for manually-rendered forms           */
/* .asteriskField — rendered by crispy-bootstrap5 for crispy forms            */
.req-star,
.asteriskField{
  color:var(--danger);
  font-weight:700;
  margin-left:2px;
  font-size:.9em;
}


/* ── Light-theme: project card overrides ──────────────────────────────────── */
/* Similar-projects card — white-overlay border invisible on white */
[data-theme="light"] .proj-sim-card { border-color: var(--border); }
/* Gradient thumb placeholder text — white glyph invisible on light surface */
[data-theme="light"] .proj-sim-thumb-gradient { color: var(--text-muted); }
/* Media tab hover — near-invisible white overlay */
[data-theme="light"] .proj-media-tab:hover:not(.is-active) { background: var(--overlay-soft); }

/* ── Light-theme: messaging shell ─────────────────────────────────────────── */
/* Structural backgrounds — replace hardcoded dark hex */
[data-theme="light"] .arch-chat-shell{background:var(--bg-base)}
[data-theme="light"] .arch-chat-rail{background:var(--bg-card);border-right-color:var(--border)}
[data-theme="light"] .arch-chat-rail-head{border-bottom-color:var(--border)}
[data-theme="light"] .arch-chat-pane{background:var(--bg-base)}
[data-theme="light"] .arch-chat-pane-head{background:rgba(255,255,255,.70);border-bottom-color:rgba(0,0,0,.08)}
[data-theme="light"] .arch-chat-pane-avatar{border-color:var(--border)}
[data-theme="light"] .arch-composer{background:var(--bg-card);border-top-color:var(--border)}

/* Rail search input */
[data-theme="light"] .arch-chat-search{border-bottom-color:var(--border)}
[data-theme="light"] .arch-chat-search input{background:var(--bg-surface);border-color:var(--border);color:var(--text-primary)}
[data-theme="light"] .arch-chat-search input:focus{background:var(--bg-card);border-color:rgba(205,161,44,.50)}

/* In-pane search bar (magnifier toggle) */
[data-theme="light"] .arch-chat-search-bar{background:var(--bg-card);border-bottom-color:var(--border)}
[data-theme="light"] .arch-chat-search-bar input{background:var(--bg-surface);border-color:var(--border);color:var(--text-primary)}
[data-theme="light"] .arch-chat-search-bar input:focus{border-color:rgba(205,161,44,.55)}

/* New-conversation modal search input */
[data-theme="light"] .arch-new-conv-input{background:var(--bg-surface);border-color:var(--border)}

/* Composer input */
[data-theme="light"] .arch-composer-input{background:var(--bg-surface);border-color:var(--border)}
[data-theme="light"] .arch-composer-input:focus{background:var(--bg-card);border-color:rgba(205,161,44,.50)}

/* Staged-files tray — fix bg-deep elements that stay dark in light mode */
[data-theme="light"] .arch-composer-staged-thumb{background:var(--bg-surface)}
[data-theme="light"] .arch-composer-staged-remove{background:var(--bg-card);color:var(--text-muted)}
[data-theme="light"] .arch-composer-staged li{background:var(--bg-card)}

/* Conv list items */
[data-theme="light"] .arch-chat-conv:hover{background:var(--overlay-soft)}
[data-theme="light"] .arch-chat-conv.is-active{background:rgba(205,161,44,.10);border-color:rgba(205,161,44,.28)}
[data-theme="light"] .arch-chat-conv-dot{border-color:var(--bg-card)}

/* Starred link + section labels */
[data-theme="light"] .arch-chat-starred-link{color:var(--text-secondary);border-bottom-color:var(--border)}
[data-theme="light"] .arch-chat-section-label{color:var(--text-muted);border-top-color:var(--border)}
[data-theme="light"] .arch-chat-tabs{border-bottom-color:var(--border)}
[data-theme="light"] .arch-chat-tab{color:var(--text-muted)}
[data-theme="light"] .arch-chat-tab:hover{color:var(--text-primary);background:rgba(0,0,0,.04)}
[data-theme="light"] .arch-chat-tab.is-active{color:var(--text-primary);background:rgba(0,0,0,.05)}

/* Archived fold-out */
[data-theme="light"] .arch-chat-archived{border-top-color:var(--border)}
[data-theme="light"] .arch-chat-archived-head:hover{background:var(--overlay-soft)}

/* Day separator pill */
[data-theme="light"] .arch-chat-day{color:var(--text-muted);background:rgba(0,0,0,.04);border-color:var(--border)}

/* Mine bubble — swap saturated gold for a pale gold tint in light mode */
[data-theme="light"] .arch-bubble-row.is-mine .arch-bubble-text{
  background:rgba(184,134,42,.16);
  color:var(--text-primary);
  border:1px solid rgba(184,134,42,.28);
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .arch-bubble-row.is-mine .arch-bubble-text a{color:var(--accent-active);text-decoration:underline}
[data-theme="light"] .arch-bubble-row.is-mine .arch-bubble-text a:hover{color:var(--accent)}

/* Their bubble — replace dark slate with a light surface */
[data-theme="light"] .arch-bubble-row.is-theirs .arch-bubble-text{
  background:var(--bg-card);
  color:var(--text-primary);
  border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}

/* Deleted / tombstone bubble border */
[data-theme="light"] .arch-bubble-row.is-deleted .arch-bubble-text{border-color:var(--border)!important}

/* Hover-action buttons inside bubbles */
[data-theme="light"] .msg-reply-btn:hover,
[data-theme="light"] .msg-thread-btn:hover,
[data-theme="light"] .msg-admin-kebab-btn:hover{background:var(--overlay-hover);color:var(--text-primary)}

/* Tombstone + reply snippet semi-transparent fills */
[data-theme="light"] .msg-tombstone{background:var(--overlay-soft)}
[data-theme="light"] .msg-reply-snippet{background:rgba(0,0,0,.04)}
[data-theme="light"] .msg-react-popover-btn:hover{background:var(--overlay-soft)}
[data-theme="light"] .msg-react-popover{box-shadow:0 6px 20px rgba(0,0,0,.12)}
[data-theme="light"] .arch-bubble-actions{background:rgba(255,255,255,.68);border-color:rgba(0,0,0,.08)}

/* Mobile: rail bottom border */
@media(max-width:700px){
  [data-theme="light"] .arch-chat-rail{border-bottom-color:var(--border)}
}

/* ── Privacy Policy page ──────────────────────────────────────────────── */
.pp-wrap{padding:32px 0 64px}
.pp-hero{text-align:center;padding:48px 0 40px;border-bottom:1px solid var(--border);margin-bottom:0}
.pp-hero-icon{
  width:64px;height:64px;border-radius:18px;
  background:var(--accent-dim);border:1px solid rgba(205,161,44,.25);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--accent);margin-bottom:20px;
}
.pp-title{font-size:clamp(22px,4vw,34px);font-weight:800;color:var(--text-primary);margin:0 0 10px}
.pp-meta{font-size:13px;color:var(--text-muted);margin-bottom:20px}
.pp-intro{
  max-width:640px;margin:0 auto;
  font-size:14px;line-height:1.75;color:var(--text-secondary);
}
.pp-section{
  padding:36px 0 0;
  border-top:1px solid var(--border);
  margin-top:36px;
}
.pp-section--last{padding-bottom:16px}
.pp-section-title{
  display:flex;align-items:center;gap:12px;
  font-size:17px;font-weight:700;color:var(--text-primary);
  margin:0 0 16px;
}
.pp-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex-shrink:0;
  border-radius:8px;
  background:var(--accent-dim);
  color:var(--accent);
  font-size:12px;font-weight:800;
}
.pp-section-sub{
  font-size:13.5px;font-weight:700;color:var(--text-secondary);
  margin:20px 0 10px;
}
.pp-text{
  font-size:14px;line-height:1.80;color:var(--text-secondary);
  margin:0 0 14px;
}
.pp-text a{color:var(--accent);text-decoration:none}
.pp-text a:hover{text-decoration:underline}
.pp-list{
  padding-inline-start:20px;margin:0 0 14px;
  display:flex;flex-direction:column;gap:8px;
}
.pp-list li{
  font-size:14px;line-height:1.70;color:var(--text-secondary);
}
.pp-list li strong{color:var(--text-primary);font-weight:600}
.pp-contact-card{
  display:inline-flex;flex-direction:column;gap:4px;
  padding:14px 20px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:13.5px;color:var(--text-secondary);
  margin-top:4px;
}
.pp-contact-card a{color:var(--accent);text-decoration:none}
.pp-contact-card a:hover{text-decoration:underline}
.pp-contact-card p{margin:0}
.pp-contact-card strong{color:var(--text-primary)}
[data-theme="light"] .pp-contact-card{background:#fff;border-color:rgba(0,0,0,.09)}
[data-theme="light"] .pp-text{color:#3b475a}
[data-theme="light"] .pp-list li{color:#3b475a}
[data-theme="light"] .pp-intro{color:#3b475a}

/* ── Trending Spotlight (#ts) ─────────────────────────────────────────── */
.ts-wrap{margin-bottom:20px}
.ts-head{display:flex;align-items:center;margin-bottom:12px}
.ts-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-accent);display:flex;align-items:center;gap:6px;
}
.ts-label i{font-size:12px}
.ts-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.ts-card{
  position:relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:3/4;
  /* UI-14 — navy base (not --bg-surface, which is white in light theme) so a
   * covered card never flashes a light edge and reads as the same dark-navy
   * surface as the no-cover fallback below. The whole row is one cohesive set. */
  background:#0d1120;
  border:1px solid rgba(255,255,255,.07);
  text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  color:inherit;
}
.ts-card:hover{
  transform:translateY(-3px) scale(1.015);
  border-color:rgba(205,161,44,.45);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  text-decoration:none;
  color:inherit;
}
/* Cover image via CSS variable — var(--ts-cover,none) so unset degrades to gradient only */
.ts-card-bg{
  position:absolute;inset:0;
  /* UI-14 — deeper, fuller navy veil (top no longer fades near-clear) so a
   * light cover image doesn't make the whole card read "silver" next to the
   * dark no-cover cards. Cover still shows through; tone stays uniform. */
  background:
    linear-gradient(to top, rgba(10,13,22,.92) 0%, rgba(10,13,22,.62) 55%, rgba(10,13,22,.40) 100%),
    var(--ts-cover, none) center/cover no-repeat;
  transition:transform .35s ease;
}
.ts-card:hover .ts-card-bg{transform:scale(1.04)}
/* No-cover fallback: dot grid under the overlay gradient */
.ts-card:not([style]) .ts-card-bg{
  background:
    linear-gradient(to top, rgba(10,13,22,.88) 0%, rgba(10,13,22,.40) 55%, transparent 100%),
    radial-gradient(circle, rgba(205,161,44,.10) 1px, transparent 1px),
    linear-gradient(135deg, #0d1120 0%, #111827 100%);
  background-size: auto, 22px 22px, 100% 100%;
}
.ts-card-body{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 14px 16px;
  pointer-events:none;
}
.ts-badge{
  align-self:flex-start;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  /* UI-09 / UI-14 — one cohesive on-brand badge for every type: gold text on a
   * dark glass chip (was a per-type set incl. an off-palette Bootstrap-blue POST
   * badge #60a5fa). Type stays legible from the label text + icon. */
  color:var(--accent);
  background:rgba(10,13,22,.72);
  border:1px solid rgba(205,161,44,.40);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:3px 9px;border-radius:20px;
  margin-bottom:10px;
  line-height:1.4;
  display:inline-flex;align-items:center;gap:5px;
}
.ts-title{
  font-size:13.5px;font-weight:700;
  color:#edf0f8;
  line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin:0 0 5px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.ts-sub{
  font-size:11px;color:rgba(235,240,250,.6);
  margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* UI-09 / UI-14 — per-kind badge colours retired in favour of one cohesive
 * gold-on-glass chip (see .ts-badge). The card label + icon carry the type. */
/* Light theme adjustments */
[data-theme="light"] .ts-card{border-color:rgba(0,0,0,.10)}
[data-theme="light"] .ts-card:hover{border-color:rgba(205,161,44,.5);box-shadow:0 6px 22px rgba(0,0,0,.15)}
[data-theme="light"] .ts-card-bg{
  /* UI-14 — trending cards stay dark-navy in light theme too (matching the
     no-cover fallback, which is theme-independent), so the row is one set. */
  background:
    linear-gradient(to top, rgba(10,13,22,.92) 0%, rgba(10,13,22,.60) 55%, rgba(10,13,22,.38) 100%),
    var(--ts-cover, none) center/cover no-repeat;
}
/* Responsive */
@media(max-width:860px){
  .ts-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .ts-card{aspect-ratio:4/3}
}
@media(max-width:480px){
  .ts-grid{grid-template-columns:repeat(2,1fr);gap:7px}
  .ts-card{aspect-ratio:3/4;border-radius:10px}
  .ts-card-body{padding:10px 10px 12px}
  .ts-title{font-size:12.5px}
}