/* ==========================================================================
   WEMIX — design tokens
   Black / white / gold editorial identity -- matching the "WEMIX." text
   wordmark (.wemix-wordmark, below) rather than the navy/blue/red palette
   this file drifted to at one point. One brand across every screen: this
   file, index.html's scoped homepage styles, and the shared header
   wordmark (js/nav.js) all resolve to the same three hues plus
   white/black neutrals.
   Custom property NAMES are kept as-is (--color-gold, --color-black, ...)
   since every component references them by name; only their VALUES and,
   where a component paired a fill + text color in a way that doesn't
   hold at the new hues (e.g. a hover fill going light gold needs dark
   text, not white), the specific text-color rule change.
   Poppins stays throughout -- it was already index.html's typeface too.
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-text: #14141f;
  --color-text-muted: #6b7280;
  --color-gold: #c9a227;           /* primary accent -- deep enough for white text on top */
  --color-gold-secondary: #e8c468; /* lighter hover/highlight gold -- pair with dark text */
  --color-gold-dark: #8a6d1f;      /* deep accent for text-on-white (links, eyebrows, focus labels) */
  --color-black: #0d0d0d;          /* primary dark surface -- near-true black */
  --color-border: #e7e9f0;
  --color-card-bg: #ffffff;
  --color-danger: #e63946;         /* semantic error/urgency red -- not part of the brand palette */
  --color-success: #1e6b3c;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-card: 0 1px 3px rgba(10, 10, 10, 0.04), 0 8px 24px rgba(10, 10, 10, 0.03);
  --shadow-card-hover: 0 4px 10px rgba(10, 10, 10, 0.06), 0 16px 32px rgba(10, 10, 10, 0.06);

  /* Container width scale -- the single source of truth for page/section
     max-width everywhere. --container-lg is the site's normal page width
     (kept as --max-width too, so every pre-existing var(--max-width)
     reference stays correct); the others exist for the few layouts that
     have a real reason to run narrower or wider than a standard page. */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 860px;
  --container-lg: 1180px;
  --container-xl: 1360px;
  --container-2xl: 1520px;
  --max-width: var(--container-lg);

  /* Spacing scale -- a consistent 4px base unit, the same convention used
     by Tailwind, Material Design, and most modern systems, so padding/
     margin values across every page stay visually consistent instead of
     each component inventing its own numbers. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;

  /* Minimum comfortable tap target on touch devices (Apple HIG / Material
     Design both recommend ~44px) -- referenced by small buttons and tabs
     inside the mobile breakpoints below. */
  --tap-target-min: 44px;
}

/* ------------------------------------------------------------------------
   BREAKPOINT SCALE

   Named tiers matching the convention used by Tailwind CSS, Bootstrap 5,
   and most current design systems, so the reasoning behind each cutoff is
   the same one any frontend developer already recognizes:

     sm    640px   large phones (landscape), small tablets
     md    768px   tablets (portrait)
     lg    1024px  tablets (landscape), small laptops
     xl    1280px  desktops

   This stylesheet is desktop-first (base rules target the primary/large
   layout; each breakpoint below progressively simplifies for less space),
   applied as `max-width` overrides at each tier boundary rather than the
   mobile-first `min-width` convention -- a legitimate, equally common
   alternative approach, chosen here because it builds on the existing
   desktop-oriented component styles without a full rewrite. The tier
   VALUES still match the standard scale above, so anyone familiar with
   Tailwind/Bootstrap breakpoints will recognize them immediately.
   ------------------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em 0;
}

/* Fluid type scale: sizes interpolate smoothly between a small-screen
   floor and a large-screen ceiling instead of jumping at fixed
   breakpoints -- the same `clamp(min, preferred, max)` approach used by
   Tailwind's typography defaults and the widely-referenced Utopia fluid
   type methodology. Component-specific headings (like .hero h1) can
   still override this with their own clamp() where a bigger range is
   wanted. */
h1 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); }
h3 { font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.3rem); }
h4 { font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1rem); }

/* Body-text hierarchy, so every page reaches for the same four sizes
   instead of ad-hoc inline font-size values. */
.text-body-lg { font-size: 1.05rem; line-height: 1.6; }
.text-body { font-size: 0.92rem; line-height: 1.55; }
.text-small { font-size: 0.82rem; line-height: 1.5; }
.text-caption { font-size: 0.72rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; }

/* Global page container -- the single source of truth for page width and
   side padding. padding-inline (a logical property covering left+right
   regardless of writing direction) steps down through 5 tiers as the
   viewport narrows, so every page that uses .container gets identical
   gutters at every breakpoint instead of each page picking its own. */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: 64px; /* wide desktop, >=1440px */
}
@media (max-width: 1439px) { .container { padding-inline: 48px; } } /* desktop */
@media (max-width: 1024px) { .container { padding-inline: 32px; } } /* tablet */
@media (max-width: 768px)  { .container { padding-inline: 24px; } } /* small tablet */
@media (max-width: 640px)  { .container { padding-inline: 16px; } } /* mobile */

/* ---------------------------------------------------------------------- */
/* Top navigation                                                         */
/* ---------------------------------------------------------------------- */

.topnav {
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* .topnav-inner always also carries .container (see js/nav.js), which
   supplies max-width/margin/side-padding from the single shared system;
   this rule only adds the topnav's own vertical padding and flex layout. */
.topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* WEMIX text wordmark -- the one brand mark used everywhere in the system
   (topnav, homepage header/footer, auth pages), replacing the old
   images/wemix.jpeg raster logo. Text color follows currentColor (so it
   adapts to whatever the parent sets -- dark on a light header, white on
   a dark panel); the trailing "." is always gold, the one fixed accent. */
.wemix-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--color-black);
  line-height: 1;
}
.wemix-wordmark span { color: var(--color-gold); }
.wemix-wordmark.on-dark { color: #ffffff; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 0.92rem;
  font-weight: 500;
}

.nav-links a { opacity: 0.75; transition: opacity 0.15s; }
.nav-links a:hover { opacity: 1; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--color-black);
  background: var(--color-black);
  color: #ffffff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s, border-color 0.15s;
}

/* Hover lifts to the lighter gold accent -- text flips to black here
   since white-on-light-gold doesn't hold the contrast that white-on-
   black (the default state) does. */
.btn:hover { background: var(--color-gold-secondary); color: var(--color-black); border-color: var(--color-gold-secondary); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* One focus-visible treatment for every button variant (primary, outline,
   ghost, danger, success), the same gold ring used on form inputs, so
   keyboard focus reads consistently across the whole button system. */
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.35); }

.btn-outline {
  background: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}
.btn-outline:hover { background: var(--color-black); color: #ffffff; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-gold-dark); color: var(--color-gold-dark); background: transparent; }

/* Danger/success carry the same shape/motion as .btn, just a different
   fill, so a destructive or confirming action never has to reach for an
   inline style to get the right color. */
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #ffffff; }
.btn-danger:hover { background: #c62d39; border-color: #c62d39; color: #ffffff; }
.btn-success { background: var(--color-success); border-color: var(--color-success); color: #ffffff; }
.btn-success:hover { background: #164f2c; border-color: #164f2c; color: #ffffff; }

.btn-block { width: 100%; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: 0.8rem; }

/* ---------------------------------------------------------------------- */
/* Cards                                                                  */
/* ---------------------------------------------------------------------- */

.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  /* Default content padding, so a card only needs an inline override when it
     deliberately wants a different density -- see .card-compact/.card-spacious
     below -- instead of every card re-declaring its own padding value. */
  padding: var(--space-5);
}

.card:hover { box-shadow: var(--shadow-card-hover); }

/* Density modifiers for the two other legitimate card sizes in use
   (compact list rows; large feature/hero cards). Anything outside this
   3-step scale is a one-off that should be reconsidered, not a 4th tier. */
.card-compact { padding: var(--space-4) var(--space-5); }
.card-spacious { padding: var(--space-8); }

.listing-card {
  display: block;
  padding: 0;
  overflow: hidden;
}

.listing-card:hover { border-color: var(--color-gold); transform: translateY(-2px); }

.listing-card-media {
  height: 150px;
  background: linear-gradient(135deg, #f7f4ea, #efe9d6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-dark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}

.listing-card-media img { width: 100%; height: 100%; object-fit: cover; }

.listing-card-body { padding: var(--space-5) var(--space-5) var(--space-4); }

.listing-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-2);
}

.listing-title {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
  line-height: 1.35;
}

.listing-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.listing-price { font-weight: 700; font-family: var(--font-display); }

/* ---------------------------------------------------------------------- */
/* Ticker (signature element)                                             */
/* ---------------------------------------------------------------------- */

.ticker {
  background: var(--color-black);
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  padding: var(--space-2) 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-scroll 40s linear infinite;
}

.ticker-track span {
  margin-right: var(--space-10);
}

.ticker-track span::before {
  content: '\25CF';
  color: var(--color-gold-secondary);
  margin-right: var(--space-3);
  font-size: 0.55rem;
  vertical-align: middle;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */

.hero {
  padding: var(--space-10) 0 var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  max-width: 720px;
}

.hero p {
  color: var(--color-text-muted);
  max-width: 560px;
  font-size: 1.02rem;
}

.hero-badge {
  display: inline-block;
  border: 1px solid var(--color-gold);
  color: var(--color-gold-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  margin-bottom: var(--space-5);
}

/* ---------------------------------------------------------------------- */
/* Grids / layout                                                         */
/* ---------------------------------------------------------------------- */

/* padding-block only, not the padding: X 0 shorthand -- see the matching
   comment on index.html's .wm-section for why: a shorthand here would
   unconditionally zero out .container's padding-inline (the shared side
   gutter) on every page's <main class="container section">, at every
   breakpoint. That was live on dashboard/moderator/listing/terms/page.html:
   their content sat flush against the screen edge while the topnav above
   them kept its padding -- confirmed via computed styles (0px vs. 64px at
   1440px) before this fix. */
.section { padding-block: var(--space-10); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* Unified 12-column grid utility (Bootstrap/Tailwind-style), for any layout
   that needs explicit column spans rather than auto-fill card wrapping.
   .grid-12 is the row; .col-span-N sizes a child to N of 12 columns. Every
   span collapses to full-width below the md tier so nothing needs its own
   per-page stacking rule. */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-5); }
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
@media (max-width: 768px) {
  .grid-12 { grid-template-columns: 1fr; gap: var(--space-4); }
  .grid-12 > * { grid-column: 1 / -1; }
}

.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-6);
}

.filters-bar input,
.filters-bar select {
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.88rem;
  background: #fff;
}

.filters-bar input:focus,
.filters-bar select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

.filters-bar input[type="text"] { flex: 1; min-width: 200px; }

/* ---------------------------------------------------------------------- */
/* Auth pages (login / register) -- deliberately NOT the site-wide topnav.
   A logged-out visitor on a sign-in screen gets no value from marketplace/
   dashboard/notification icons that don't apply yet, and the old layout
   showed the full nav bar just to display a single redundant "Log in"
   button on the login page itself. Split-screen instead: an editorial
   brand panel (hidden below 900px) plus a focused, minimal form column
   with just a wordmark and a way back out -- no header chrome at all.  */
/* ---------------------------------------------------------------------- */

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Grid/flex items default to min-width:auto, which refuses to shrink
   below the content's intrinsic min size -- the same overflow trap
   .dash-grid > * already guards against elsewhere in this file. Without
   this, the form column (and everything inside it) forces the whole
   page wider than the viewport on narrow screens instead of shrinking. */
.auth-page > * { min-width: 0; }
.auth-form-center, .auth-form-card { min-width: 0; }

.auth-panel-brand {
  background: linear-gradient(155deg, var(--color-black) 0%, #1a1a1a 60%, #262626 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
}

/* A quiet dot-grid texture -- decorative only, never competes with the
   foreground content, and respects prefers-reduced-motion by simply
   having no motion to begin with. */
.auth-panel-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 30% 20%, black, transparent 70%);
  pointer-events: none;
}

.auth-panel-wordmark {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.auth-panel-wordmark span { color: var(--color-gold); }

.auth-panel-content { position: relative; max-width: 420px; }

.auth-panel-eyebrow {
  display: inline-block;
  color: var(--color-gold-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.auth-panel-content h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.3rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-4) 0;
  color: #fff;
}

.auth-panel-content p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.auth-panel-points {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth-panel-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
}

.auth-panel-points li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  margin-top: var(--space-2);
  flex-shrink: 0;
}

.auth-panel-foot {
  position: relative;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.auth-form-col {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-form-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-6) var(--space-10) 0;
}

.auth-form-topbar a.auth-back-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.auth-form-topbar a.auth-back-link:hover { color: var(--color-text); }

.auth-form-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}

.auth-form-card { width: 100%; max-width: 400px; }
.auth-form-card h2 { margin-bottom: var(--space-1); }

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-panel-brand { display: none; }
  .auth-form-topbar { padding: var(--space-5) var(--space-5) 0; }
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */

.auth-shell {
  max-width: 420px;
  margin: var(--space-10) auto;
  padding: 0 var(--space-6);
}

.form-card { padding: var(--space-8); }

.form-group { margin-bottom: var(--space-5); }

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3);
  font-size: 0.92rem;
  background: #fff;
  color: var(--color-text);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

.form-group textarea { resize: vertical; min-height: 90px; }

.form-hint { font-size: 0.78rem; color: var(--color-text-muted); margin-top: var(--space-2); }
.form-error { font-size: 0.8rem; color: var(--color-danger); margin-top: var(--space-2); }

.field-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.field-row > .form-group { flex: 1; min-width: 220px; }

/* ---------------------------------------------------------------------- */
/* Alerts / status pills                                                  */
/* ---------------------------------------------------------------------- */

.alert {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  margin-bottom: var(--space-5);
  border: 1px solid transparent;
}

.alert-error { background: #fbeceb; color: var(--color-danger); border-color: #f3cfcc; }
.alert-success { background: #eaf5ee; color: var(--color-success); border-color: #cdeadb; }
.alert-info { background: #faf3e0; color: var(--color-gold-dark); border-color: #f0e0ad; }

.pill {
  display: inline-block;
  /* Intentionally off the --space-N scale: a status pill is sized around
     its own tiny font-size (0.68rem), not the page's content-spacing
     rhythm -- rounding this up to the nearest token visibly bulks out a
     component that's used everywhere and needs to stay compact. */
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pill-verified { background: #eaf5ee; color: var(--color-success); }
.pill-pending { background: #faf3e0; color: var(--color-gold-dark); }
.pill-rejected { background: #fbeceb; color: var(--color-danger); }

/* Deliberately NOT the brand accent -- star ratings are a near-universal
   amber convention (Amazon/Google/Yelp/...) that users read at a glance;
   decoupling this from the brand palette keeps that recognizable. */
.rating-summary { color: #d4a017; font-size: 0.95rem; }
.rating-summary strong { color: var(--color-text); }

/* ---------------------------------------------------------------------- */
/* Notification bell                                                      */
/* ---------------------------------------------------------------------- */

.notif-bell-wrap { position: relative; display: inline-block; }

.notif-bell-btn {
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  position: relative;
  padding: var(--space-1) var(--space-2);
  line-height: 1;
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-gold);
  color: var(--color-black);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px; /* same intentional exception as .pill, above */
  min-width: 15px;
  text-align: center;
}

.notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  z-index: 60;
}

.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}

.notif-dropdown-header a {
  color: var(--color-gold-dark);
  font-size: 0.78rem;
  font-weight: 600;
}

.notif-item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.12s;
}

.notif-item:hover { background: #f6f3ea; }
.notif-item:last-child { border-bottom: none; }

.notif-unread { background: #faf3e0; }
.notif-unread:hover { background: #f5e9c8; }

.notif-item-title { font-size: 0.85rem; font-weight: 600; margin-bottom: var(--space-1); }
.notif-item-message { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.notif-item-time { font-size: 0.7rem; color: var(--color-text-muted); }

/* ---------------------------------------------------------------------- */
/* Icon-based nav (home / dashboard-or-moderation / bell / avatar)        */
/* ---------------------------------------------------------------------- */

.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  transition: background 0.12s;
  text-decoration: none;
  position: relative;
  line-height: 1;
}

.nav-icon-btn:hover { background: #f4f0e4; }
.nav-icon-btn:focus-visible, .avatar-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.35); }

.nav-icon-btn-label {
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
}

.nav-icon-glyph { display: inline-flex; }

.avatar-wrap { position: relative; display: inline-block; }

.avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-black);
  border: none;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.12s;
  overflow: hidden;
  padding: 0;
}

.avatar-btn img, .avatar-circle-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-btn:hover { filter: brightness(0.94); }

.avatar-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 280px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  z-index: 60;
  overflow: hidden;
}

.avatar-dropdown-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: #f6f3ea;
}

.avatar-circle-lg {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-black);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar-name { font-weight: 700; font-size: 0.88rem; }
.avatar-email { font-size: 0.75rem; color: var(--color-text-muted); word-break: break-all; }

.avatar-dropdown-body { padding: var(--space-2); }

.avatar-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s;
}

.avatar-menu-item:hover { background: #f6f3ea; }
.avatar-menu-item-danger { color: var(--color-danger); }
.avatar-menu-item-danger:hover { background: #fbecec; }

.avatar-password-form {
  padding: var(--space-2) var(--space-3) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.avatar-password-form input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.82rem;
}
.pill-draft { background: #f2f2f2; color: var(--color-text-muted); }

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

.dash-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  min-width: 0;
}

.dash-grid > * { min-width: 0; } /* prevents a grid item's intrinsic content width from forcing the track wider than the viewport */
.dash-sidebar .card { padding: var(--space-6); margin-bottom: var(--space-4); }

.wallet-balance {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-black);
}

.wallet-currency { font-size: 0.9rem; color: var(--color-text-muted); font-weight: 500; }

.dash-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.dash-tab {
  padding: var(--space-3) var(--space-5);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-tab.active { color: var(--color-black); border-color: var(--color-gold); }

.sub-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.sub-tab {
  padding: var(--space-2) var(--space-4);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: #f4f0e4;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.sub-tab.active {
  color: var(--color-black);
  background: var(--color-gold);
}

/* Dashboard primary navigation -- grouped sidebar links replacing a
   flat horizontal tab row that had grown to 11 equally-weighted items.
   <details>/<summary> per group gives real, native (no custom JS)
   collapse/expand -- doubles as the "tablet: collapsible nav" behavior
   for free once .dash-grid stacks to one column. */
.dash-nav { margin-top: var(--space-1); }
.dash-nav-group { border: none; margin-bottom: var(--space-1); }
.dash-nav-group summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-1) var(--space-2) var(--space-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-nav-group summary::-webkit-details-marker { display: none; }
.dash-nav-group summary::after { content: '\25BE'; font-size: 0.7rem; transition: transform 0.15s; color: var(--color-gold-dark); }
.dash-nav-group[open] summary::after { transform: rotate(180deg); }
.dash-nav-link {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-left: 2px solid transparent;
  cursor: pointer;
  border-radius: 0 6px 6px 0;
}
.dash-nav-link:hover { background: #f4f0e4; }
.dash-nav-link.active { color: var(--color-black); border-left-color: var(--color-gold); background: #f4f0e4; }

/* Mobile: bottom nav + drawer, hidden entirely above the phone tier. */
.dash-bottom-nav { display: none; }
.dash-drawer-overlay { display: none; }

@media (max-width: 640px) {
  .dash-nav { display: none; } /* the bottom nav + drawer fully replaces it at this width */

  .dash-bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-1) calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .dash-bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    background: none; border: none; font-family: inherit; font-size: 0.66rem; font-weight: 600;
    color: var(--color-text-muted); padding: var(--space-2) var(--space-1); cursor: pointer;
  }
  .dash-bottom-nav-item.active { color: var(--color-gold-dark); }
  .dash-bottom-nav-item svg { width: 20px; height: 20px; }

  .dash-drawer-overlay.open {
    display: flex; position: fixed; inset: 0; z-index: 70;
    background: rgba(13,13,13,0.5); align-items: flex-end;
  }
  .dash-drawer {
    background: #fff; width: 100%; border-radius: 16px 16px 0 0;
    padding: var(--space-2) var(--space-2) calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 60vh; overflow-y: auto;
  }
  .dash-drawer-handle { width: 36px; height: 4px; background: var(--color-border); border-radius: 2px; margin: var(--space-2) auto var(--space-3); }
  .dash-drawer-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding: var(--space-1) var(--space-3) var(--space-2); }
  .dash-drawer .dash-nav-link { padding: var(--space-3); border-radius: 8px; border-left: none; }
  .dash-drawer .dash-nav-link.active { background: var(--color-gold); color: var(--color-black); }

  /* Must clear the fixed bar's real rendered height (~71px measured, not
     just its icon+label content) plus the safe-area it also reserves --
     var(--space-10) alone (40px) left the last line of whatever's at the
     bottom of the page (now the shared footer's copyright bar) partly
     hidden behind it. */
  body.has-dash-bottom-nav { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

.table-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
}

.table-row:last-child { border-bottom: none; }

/* Header row for a .table-row list that needs column labels (e.g. the
   platform wallet's ledger entries) -- pass the same grid-template-columns
   used by the data rows below it via inline style so header/data columns
   always line up exactly. */
.ledger-table-header {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Keeps every ledger row the same height regardless of description length
   -- truncated with an ellipsis rather than wrapping, since a table reads
   as organized when every row lines up; the full text is still available
   via the title tooltip on hover. */
.ledger-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  /* The mobile .table-row layout below switches to a stacked card (each
     span on its own line), where column headers and single-line
     truncation don't apply -- hide the header and let the description
     wrap normally instead of clipping useful text on a narrow screen. */
  .ledger-table-header { display: none; }
  .ledger-desc { white-space: normal; overflow: visible; text-overflow: clip; }
  /* The header (which normally labels this column "Balance after") is
     hidden on mobile, so spell it out inline instead. */
  .ledger-balance::before { content: "balance: "; }
}

.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  color: var(--color-text-muted);
}

.empty-state h3 { color: var(--color-text); }

/* ---------------------------------------------------------------------- */
/* Listing detail                                                         */
/* ---------------------------------------------------------------------- */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-9);
  align-items: start;
  min-width: 0;
}

.detail-grid > * { min-width: 0; }

.detail-media {
  height: 340px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, #f7f4ea, #efe9d6);
}

.detail-media img { width: 100%; height: 100%; object-fit: cover; }

.paywall {
  border: 1px dashed var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  background: #fffdf7;
}

.paywall p { color: var(--color-text-muted); font-size: 0.88rem; }

.buy-box { padding: var(--space-6); position: sticky; top: 90px; }
.buy-price { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; margin-bottom: var(--space-1); }
.buy-box .form-group { margin-bottom: var(--space-4); }

/* Premium editorial hero for the listing conversion page. The image
   layer (.listing-hero-img) gets its transform written by a small
   scroll listener in listing.html for a subtle parallax drift -- kept
   to a few percent of travel and skipped entirely under
   prefers-reduced-motion, so it's a flourish, never a distraction. */
.listing-hero {
  position: relative;
  height: clamp(280px, 42vw, 480px);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--color-black), #1a1a1a);
}
.listing-hero-img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
}
.listing-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%);
}
.listing-hero-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-6);
  color: #fff;
}
.listing-hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.listing-hero-content h1 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem); margin: 0 0 var(--space-2) 0; max-width: 760px; }
.listing-hero-meta { color: rgba(255,255,255,0.78); font-size: 0.85rem; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  backdrop-filter: blur(2px);
}
.trust-badge.on-light { background: var(--color-card-bg); border: 1px solid var(--color-border); color: var(--color-text); }
.trust-badge.gold { background: var(--color-gold); color: var(--color-black); }

/* Story intelligence panel -- surfaces the wire/IPTC-style metadata
   (credit line, capture date, GPS, keywords, license, territory,
   source) that the API has always returned but nothing rendered. */
.intel-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4) var(--space-5);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}
.intel-item-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.intel-item-value { font-size: 0.88rem; font-weight: 600; word-break: break-word; }

/* Seller profile module */
.seller-card { padding: var(--space-5); margin: var(--space-5) 0; }
.seller-card-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.seller-card-avatar {
  width: 56px; height: 56px; min-width: 56px; border-radius: 50%;
  background: var(--color-gold); color: var(--color-black);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.3rem; overflow: hidden;
}
.seller-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.seller-card-name { font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.seller-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.seller-stat { text-align: center; }
.seller-stat-num { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-black); }
.seller-stat-label { font-size: 0.66rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--space-1); }

/* Conversion / trust strip inside the buy box */
.buy-guarantee-list { list-style: none; margin: var(--space-4) 0 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.buy-guarantee-list li { display: flex; align-items: center; gap: var(--space-2); font-size: 0.78rem; color: var(--color-text-muted); }
.buy-guarantee-list li::before { content: '\2713'; color: var(--color-success); font-weight: 700; }
.scarcity-note { display: flex; align-items: center; gap: var(--space-2); font-size: 0.78rem; color: var(--color-gold-dark); font-weight: 600; margin-top: var(--space-2); }

/* Related-content sections (More From This Seller / Related Stories /
   Trending In Category) -- reuse .listing-card, previously a defined
   but unused component. */
.related-section { margin-top: var(--space-8); }
.related-section h2 { font-size: 1.05rem; margin-bottom: var(--space-4); }

@media (max-width: 640px) {
  .listing-hero { height: clamp(220px, 60vw, 340px); }
  .seller-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* Footer -- the one site footer, rendered by js/nav.js's renderFooter()  */
/* into #footer-root on every page that wants site chrome (same idea as   */
/* .topnav above). Only sections that link somewhere real: brand, live    */
/* category links, real contact channels, and the StaticPage-backed       */
/* Company/Resources pages (see core.StaticPage -- About/Careers/Press/   */
/* FAQ/Privacy/Cookie Policy are real, moderator-editable pages, not      */
/* placeholder text). Social-icon links stay omitted until real platform  */
/* social accounts exist (see PlatformSetting).                          */
/* ---------------------------------------------------------------------- */

.wm-footer { background: var(--color-black); color: rgba(255,255,255,0.65); padding: var(--space-10) 0 var(--space-5); margin-top: var(--space-10); }
.wm-footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 1fr; gap: var(--space-5); margin-bottom: var(--space-7); }
.wm-footer-col h4 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-3) 0; }
.wm-footer-col a { display: block; font-size: 0.82rem; margin-bottom: var(--space-2); color: rgba(255,255,255,0.65); }
.wm-footer-col a:hover { color: #fff; }
.wm-footer-contact-item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.82rem; margin-bottom: var(--space-3); color: rgba(255,255,255,0.65); }
.wm-footer-contact-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.wm-footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-4); font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; color: rgba(255,255,255,0.5); }

@media (max-width: 900px) {
  .wm-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
  .wm-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Utility                                                                */
/* ---------------------------------------------------------------------- */

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(212, 175, 55, 0.35);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

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

.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.hidden { display: none !important; }

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

/* ---------------------------------------------------------------------- */
/* Responsive breakpoints (see BREAKPOINT SCALE comment near :root)       */
/* ---------------------------------------------------------------------- */

/* ===== lg tier and below (<=1024px): laptops/tablets landscape =====
   First simplification: two-column page layouts (listing detail's body+
   buy-box, dashboard's sidebar+content) go single-column. Nothing here
   changes spacing/type yet -- at this size there's still plenty of room,
   the only problem is fixed-width side-by-side columns getting cramped. */
@media (max-width: 1024px) {
  .detail-grid { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .buy-box { position: static; }
}

/* ===== md tier and below (<=768px): tablets portrait =====
   Nav starts tightening (smaller gaps, tagline hidden) and any ad-hoc
   inline two-column grids (the user-management modal's action buttons)
   collapse to one column so touch targets stay full-width and easy to
   tap rather than squeezed to half-width. */
@media (max-width: 768px) {
  .topnav-inner { padding-block: var(--space-3); }
  .nav-links { gap: var(--space-2); }

  .modal-body > div[style*="grid-template-columns:1fr 1fr"],
  .modal-body > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .user-cards-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ===== sm tier and below (<=640px): phones =====
   The real regrouping tier. Multi-column forms/rows stack to single
   column, list rows become label-first "cards" instead of a grid that
   no longer has room for its columns, dialogs go edge-to-edge, and every
   interactive control grows to at least --tap-target-min for comfortable
   thumb use (Apple HIG / Material Design's ~44px recommendation). */
@media (max-width: 640px) {
  /* Content rows (withdrawals, refunds, sales, audit log, ...): the
     first column is always the "identifying" value (title/username/
     amount) in every render function across the app, so it stays bold
     and full-width up top; the remaining columns wrap into a smaller
     muted meta line underneath instead of each getting its own row with
     no label -- the common "card list" pattern most systems fall back
     to once a data table no longer fits. */
  .table-row {
    display: block;
    padding: var(--space-3) 0;
  }
  .table-row > span {
    display: inline;
  }
  .table-row > span:first-child {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
  }
  .table-row > span:not(:first-child) {
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }
  .table-row > span:not(:first-child):not(:last-child)::after {
    content: '·';
    margin: 0 var(--space-2);
  }

  .field-row { flex-direction: column; gap: var(--space-3); }
  .field-row > .form-group { min-width: 0; }

  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-dialog { max-width: 100%; max-height: 100vh; border-radius: 0; }

  .user-cards-grid { grid-template-columns: 1fr; }

  .dash-tabs { gap: 0; }
  .dash-tab {
    padding: var(--space-3) var(--space-3);
    font-size: 0.82rem;
    min-height: var(--tap-target-min);
    display: flex;
    align-items: center;
  }

  .sub-tab { min-height: 38px; display: inline-flex; align-items: center; }

  .avatar-dropdown, .notif-dropdown { width: calc(100vw - 32px); right: -8px; }

  /* Touch targets: bump the compact button/pill variants back up to a
     comfortable tap size on touch screens -- desktop keeps the denser
     spacing since a mouse pointer doesn't need it. */
  .btn-sm { min-height: var(--tap-target-min); padding: var(--space-2) var(--space-4); }
  .btn { min-height: var(--tap-target-min); }
  .nav-icon-btn { min-width: var(--tap-target-min); min-height: var(--tap-target-min); }
  .avatar-btn { width: var(--tap-target-min); height: var(--tap-target-min); }

  /* Any explicit multi-column inline grid (settings integration-status
     cards, stat grids, etc.) collapses to a single column -- covers
     grids built with an inline style attribute rather than a class,
     which several dashboard sections use for one-off layouts. */
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  .flex-between {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* ===== Extra-small phones (<=380px) =====
   Only the wordmark shrinks a touch further here -- type elsewhere is
   already handled by the fluid clamp() scale, so nothing else jumps. */
@media (max-width: 380px) {
  .wemix-wordmark { font-size: 1.2rem; }
}

/* ===== Print / very large desktops =====
   Cap prose/card content from stretching uncomfortably wide on very
   large monitors even though .container already has a max-width -- this
   only matters for a handful of full-bleed elements (e.g. the ticker)
   that intentionally ignore .container. */
@media (min-width: 1536px) {
  .ticker-track { font-size: 0.85rem; }
}

/* ---------------------------------------------------------------------- */
/* Modal dialog                                                           */
/* ---------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 10, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
  z-index: 200;
  overflow-y: auto;
}

.modal-overlay.hidden { display: none; }

.modal-dialog {
  background: #fff;
  border-radius: var(--radius-lg, 12px);
  width: 100%;
  max-width: 640px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-1);
}

.modal-close-btn:hover { color: var(--color-black); }

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
}

/* ---------------------------------------------------------------------- */
/* User management cards                                                  */
/* ---------------------------------------------------------------------- */

.user-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.user-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.user-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border-color: var(--color-gold);
}

.user-card-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-black);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.user-card-avatar img { width: 100%; height: 100%; object-fit: cover; }

.user-card-body { flex: 1; min-width: 0; }

.user-card-name {
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card-email {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: var(--space-1) 0 var(--space-2) 0;
}

.user-card-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

.user-card-trust {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}