/* ══════════════════════════════════════════════════════════════════
   BENCH BIO — WORKSPACE STYLES  v3
   Tokens inherited from literature-review.css / design-alignment.css
══════════════════════════════════════════════════════════════════ */

/* ── Page shell ────────────────────────────────────────────────
   The plain "Workspace" text heading has been retired in favour of
   the hero card below (.ws-hero) — the sidebar's active nav item
   already labels this page, so a second, duplicate heading above the
   hero just repeated it. A very low-opacity echo of the hero's own
   teal wash is fixed behind the whole page (not just the hero) so the
   page reads as one tied-together palette rather than a coloured card
   sitting on a flat white page — same move used on the Projects
   dashboard (see project-home.css's .proj-body--home). */
.ws-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: radial-gradient(1100px 440px at 14% -10%, rgba(60,110,99,0.05) 0%, rgba(60,110,99,0) 60%);
  padding: 10px 8px 28px;
}


/* ══════════════════════════════════════════════════════════════════
   PANEL: NO WORKSPACE
══════════════════════════════════════════════════════════════════ */
#ws-panel-none {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
}

.ws-empty-hero {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: var(--r-card, 14px);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: var(--shadow-card);
}

.ws-empty-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--teal-soft, rgba(13,167,154,0.10));
  color: var(--teal, #0da79a);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 4px;
}

.ws-empty-hero h2 {
  font-size: var(--text-lg, 1.00rem);
  font-weight: var(--fw-bold, 700);
  color: var(--ink, #1a1210);
  letter-spacing: -0.02em;
}

.ws-empty-hero p {
  font-size: var(--text-sm, 0.72rem);
  color: var(--ink-soft, #5f5551);
  line-height: var(--lh-relaxed, 1.70);
  max-width: 300px;
}

.ws-empty-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}


/* ══════════════════════════════════════════════════════════════════
   PANEL: CREATE FORM
══════════════════════════════════════════════════════════════════ */
.ws-form-panel {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: var(--r-card, 14px);
  padding: 24px 26px 22px;
  max-width: 440px;
  box-shadow: var(--shadow-card);
}

.ws-form-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.ws-form-panel-header h2 {
  font-size: var(--text-md, 0.90rem);
  font-weight: var(--fw-bold, 700);
  color: var(--ink, #1a1210);
  letter-spacing: -0.02em;
}

.ws-back-btn {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: none;
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  color: var(--ink-soft, #5f5551);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.ws-back-btn:hover {
  background: var(--sidebar-hover, rgba(43,24,23,0.06));
  color: var(--ink, #1a1210);
}

.ws-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.ws-field label {
  font-size: var(--text-xs, 0.65rem);
  font-weight: var(--fw-semi, 600);
  color: var(--ink-soft, #5f5551);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ws-field input {
  width: 100%;
  height: var(--h-input, 36px);
  padding: 0 12px;
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: var(--r-input, 10px);
  background: var(--bg-input, #fff);
  font-size: var(--text-base, 0.82rem);
  color: var(--ink, #1a1210);
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.ws-field input:focus {
  border-color: var(--border-focus, rgba(13,167,154,0.45));
  box-shadow: 0 0 0 3px var(--teal-glow, rgba(13,167,154,0.12));
}

.ws-field input::placeholder { color: var(--ink-muted, #8f817b); }

.ws-form-footer {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.ws-status {
  font-size: var(--text-xs, 0.65rem);
  min-height: 14px;
  padding: 4px 2px 0;
  transition: color 0.18s;
  color: var(--ink-muted);
}
.ws-status.success { color: var(--green, #059669); }
.ws-status.error   { color: var(--red,   #dc2626); }


/* ══════════════════════════════════════════════════════════════════
   PANEL: ACTIVE WORKSPACE
══════════════════════════════════════════════════════════════════ */
#ws-panel-active {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ══════════════════════════════════════════════════════════════════
   WORKSPACE HERO
   ──────────────
   Replaces the old flat .ws-header-card. Modelled directly on the
   Projects dashboard hero (project-home.css's .home-hero) so the two
   top-level pages read as one product: a soft teal gradient wash (no
   border, no boxed edge — it "sits on the page"), an initial avatar +
   name, a one-line meta row, and the tab bar folded into the same
   card, separated by a hairline tinted to match the wash rather than
   a flat grey divider. Gradient uses this app's real --teal token
   (#3c6e63) — not a separate hard-coded brand colour — so it stays in
   sync if that token is ever retuned.
══════════════════════════════════════════════════════════════════ */
.ws-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(130% 190% at 100% -15%, rgba(60,110,99,0.16) 0%, rgba(60,110,99,0) 58%),
    linear-gradient(160deg, rgba(60,110,99,0.10) 0%, rgba(60,110,99,0.025) 48%, rgba(60,110,99,0) 78%);
  border: none;
  border-radius: var(--r-card, 8px);
  padding: 22px 24px 18px;
  box-shadow: none;
}

.ws-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Invite action — sits top-right of the hero, mirroring the Projects
   dashboard hero's action row (project-home.css's .home-hero-actions /
   .home-hero-btn). Opens the same invite-code popup used by the
   sidebar's "Invite teammates" box (see sidebar.js
   toggleWorkspaceInvitePopup), just anchored here instead. */
.ws-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ws-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.ws-hero-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
  color: var(--ink);
}
.ws-hero-btn i { font-size: 0.95rem; }

.ws-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  flex: 1 1 320px;
}

.ws-hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-muted, #8f817b);
}

.ws-hero-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ws-hero-avatar {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, #4d8a7d 0%, #2c5049 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
  box-shadow: 0 4px 12px -4px rgba(44,80,73,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}

.ws-hero-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #1a1210);
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Member avatars — bottom-right corner of the hero ──────────────────
   Same treatment as the Projects dashboard hero's collaborator stack
   (project-home.css's .home-collab-*): stacked, overlapping initials
   circles with a "+N" bubble for whoever doesn't fit, and a hover/focus
   popover listing everyone by name. Offsets match .ws-hero's own
   padding (22px 24px 18px) so the stack sits flush with the hero's
   right/bottom content inset, exactly as in Projects. */
.ws-collab-stack {
  position: absolute;
  right: 20px;
  bottom: 14px;
}
.ws-collab-stack:focus-visible { outline: none; }
.ws-collab-avatars {
  display: flex;
  align-items: center;
  cursor: default;
}
.ws-collab-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated, #f2efea);
  color: var(--ink-soft, #5f5551);
  font-size: 0.66rem;
  font-weight: 700;
  border: 2px solid var(--bg-surface, #fff);
  box-shadow: 0 1px 2px rgba(43,24,23,0.08);
}
.ws-collab-avatar + .ws-collab-avatar { margin-left: -8px; }
.ws-collab-more {
  background: var(--bg-page, #f2efea);
  color: var(--ink-muted, #8f817b);
  font-size: 0.6rem;
}

.ws-collab-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 168px;
  max-width: 220px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(43,24,23,0.12));
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(43,24,23,0.16);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 50;
}
.ws-collab-stack:hover .ws-collab-popover,
.ws-collab-stack:focus-within .ws-collab-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ws-collab-popover-title {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted, #8f817b);
  margin-bottom: 7px;
}
.ws-collab-popover-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 180px;
  overflow-y: auto;
}
.ws-collab-popover-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ws-collab-popover-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated, #f2efea);
  color: var(--ink-soft, #5f5551);
  font-size: 0.56rem;
  font-weight: 700;
}
.ws-collab-popover-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink, #1a1210);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.ws-tabs::-webkit-scrollbar { display: none; }

.ws-tab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
  color: var(--ink-soft, #5f5551);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.ws-tab:hover {
  color: var(--ink, #1a1210);
  background: rgba(255,255,255,0.55);
}

.ws-tab.active {
  color: var(--ink, #1a1210);
  background: var(--bg-surface, #fff);
  font-weight: 700;
  cursor: default;
  box-shadow: 0 1px 2px rgba(43,24,23,0.05), 0 4px 10px -6px rgba(43,24,23,0.14);
}
.ws-tab.active:hover { background: var(--bg-surface, #fff); }

/* Icons were dropped from the tab labels to match the Projects nav
   row (plain text only) — this rule is kept only in case a future tab
   ever needs one. */
.ws-tab .bx { font-size: 0.9rem; }

@media (max-width: 760px) {
  .ws-hero { padding: 16px 16px 14px; gap: 12px; }
}


/* ══════════════════════════════════════════════════════════════════
   MEMBER TABLE CARD
══════════════════════════════════════════════════════════════════ */
.ws-card {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: var(--r-card, 14px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.ws-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, rgba(43,24,23,0.08));
}

.ws-card-header h3 {
  font-size: var(--text-base, 0.82rem);
  font-weight: var(--fw-semi, 600);
  color: var(--ink, #1a1210);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ws-card-header h3 i {
  color: var(--ink-muted, #8f817b);
  font-size: 15px;
}

.ws-member-count-badge {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 7px;
  background: var(--bg-page);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: 20px;
  color: var(--ink-soft, #5f5551);
}

.ws-member-table-wrap {
  overflow-x: auto;
}

.ws-member-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 0.72rem);
}

.ws-member-table th {
  padding: 8px 14px;
  text-align: left;
  font-size: 0.62rem;
  font-weight: var(--fw-semi, 600);
  color: var(--ink-muted, #8f817b);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border, rgba(43,24,23,0.08));
  white-space: nowrap;
}

.ws-member-table tbody tr {
  border-bottom: 1px solid rgba(43,24,23,0.05);
  transition: background 0.12s;
}

.ws-member-table tbody tr:last-child { border-bottom: none; }
.ws-member-table tbody tr:hover { background: var(--bg-page); }

.ws-member-table td {
  padding: 10px 14px;
  vertical-align: middle;
  color: var(--ink, #1a1210);
}

.ws-muted { color: var(--ink-muted, #8f817b) !important; }

/* Column widths */
.ws-col-avatar  { width: 36px; padding-right: 0 !important; }
.ws-col-name    { min-width: 130px; }
.ws-col-email   { min-width: 160px; }
.ws-col-role    { width: 148px; }
.ws-col-joined  { width: 120px; }
.ws-col-actions { width: 168px; text-align: right; }

/* ── Assignments admin table (workspace.html #wsAssignTableBody) ──────
   Fixed, proportional widths so the row always fits its card instead
   of overflowing and pushing the "View" action off-screen at laptop
   widths. Only three real columns share the space; the Actions column
   only ever holds one icon+label button here (vs. two on the Members
   tab), so it needs far less than the shared 168px default. ── */
.ws-assign-table { table-layout: fixed; }
.ws-assign-table .ws-col-pubs     { width: 30%; }
.ws-assign-table .ws-col-projects { width: 26%; }
.ws-assign-table .ws-col-actions  { width: 84px; padding-right: var(--space-4, 16px); }

/* Avatar */
.ws-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--ink-soft);
  font-weight: 700;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 1px 2px rgba(43,24,23,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.70rem;
  font-weight: var(--fw-bold, 700);
  flex-shrink: 0;
}

.ws-member-name {
  font-weight: var(--fw-medium, 500);
  color: var(--ink, #1a1210);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.ws-member-email {
  color: var(--ink-soft, #5f5551);
  font-size: 0.70rem;
}

/* Role badge — static, read-only display (used for your own row, or
   when the viewer isn't an admin). Neutral tone: no per-role colour. */
.ws-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--bg-page, #f2efea);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  color: var(--ink-soft, #5f5551);
}

/* Role toggle — replaces the old promote/demote text buttons with an
   inline two-way segmented switch. Deliberately neutral (no per-role
   colour, no amber/teal) so granting or revoking admin reads as a
   routine setting rather than an alarming action. Only rendered for
   admins viewing another member's row. */
.ws-role-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-page, #f2efea);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: 20px;
  padding: 2px;
}
.ws-role-toggle-opt {
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted, #8f817b);
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ws-role-toggle-opt:hover:not(.active) {
  color: var(--ink-soft, #5f5551);
  background: rgba(43,24,23,0.05);
}
.ws-role-toggle-opt.active {
  background: var(--bg-surface, #fff);
  color: var(--ink, #1a1210);
  box-shadow: 0 1px 2px rgba(43,24,23,0.08);
  cursor: default;
}

/* Remove button */
.ws-remove-btn {
  background: none;
  border: none;
  font-family: inherit;
  padding: 5px 6px;
  border-radius: 6px;
  color: var(--ink-muted, #8f817b);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.ws-remove-btn:hover {
  color: var(--red, #dc2626);
  background: var(--red-soft, rgba(220,38,38,0.08));
}

/* Row actions — just the remove button now that role changes live in
   the inline toggle (see .ws-role-toggle above). */
.ws-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* Empty row */
.ws-empty-row {
  text-align: center;
  padding: 28px 14px !important;
  color: var(--ink-muted, #8f817b);
  font-size: var(--text-sm, 0.72rem);
}


    /* ── Workspace data stats ─────────────────────────── */
    .ws-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 4px;
    }
    @media (max-width: 600px) { .ws-stats-grid { grid-template-columns: 1fr; } }

    .ws-stat-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: var(--bg-elevated, #f9f7f5);
      border: 1px solid var(--border, #e5e8ed);
      border-radius: 10px;
    }
    .ws-stat-icon {
      font-size: 1.4rem;
      color: var(--ink-muted, #8f817b);
      flex-shrink: 0;
    }
    .ws-stat-value {
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--ink, #1a1210);
      line-height: 1;
    }
    .ws-stat-label {
      font-size: 0.73rem;
      color: var(--ink-muted, #8f817b);
      margin-top: 3px;
    }
    .ws-stats-loading, .ws-stats-error {
      font-size: 0.8rem;
      color: var(--ink-muted);
      padding: 12px 0;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    /* ── Member contribution badge ────────────────────── */
    .ws-contrib-badge {
      font-size: 0.72rem;
      color: var(--ink-muted, #8f817b);
      font-weight: 500;
      white-space: nowrap;
    }
    .ws-col-contrib {
      white-space: nowrap;
    }

    /* ── Provenance info in history panel ─────────────── */
    .ws-prov-label {
      font-size: 0.72rem;
      color: var(--ink-muted);
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 4px;
    }
    .ws-prov-label i { font-size: 0.74rem; }

    /* ── Migration status note ────────────────────────── */
    .ws-migration-note {
      font-size: 0.75rem;
      color: var(--ink-soft);
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      margin-top: 8px;
      display: flex;
      align-items: flex-start;
      gap: 7px;
      line-height: 1.5;
    }
    .ws-migration-note i { flex-shrink: 0; margin-top: 1px; color: var(--teal); }


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .ws-hero-top { flex-direction: column; align-items: flex-start; }
  .ws-col-email,
  .ws-col-joined  { display: none; }
}

/* Assignments table: below 600px drop the Projects column (already
   visible per-project once a row is expanded) and hand its space to
   the member name so it isn't squeezed to nothing. */
@media (max-width: 600px) {
  .ws-assign-table .ws-col-projects { display: none; }
  .ws-assign-table .ws-col-pubs { width: 96px; }
}

/* ══════════════════════════════════════════════════════════════════
   WORKSPACE TABS
══════════════════════════════════════════════════════════════════ */
.ws-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid rgba(74,133,120,0.16);
  padding-top: 14px;
}
.ws-tabs::-webkit-scrollbar { display: none; }

.ws-tab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 8px 16px;
  font-size: var(--text-sm, 0.72rem);
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
  color: var(--ink-muted, #8f817b);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ws-tab:hover {
  color: var(--ink, #1a1210);
  background: var(--bg-page, #f7f4f1);
}

.ws-tab.active {
  color: var(--ink, #1a1210);
  font-weight: var(--fw-bold, 700);
  box-shadow: 0 1px 2px rgba(43,24,23,0.05), 0 4px 10px -6px rgba(43,24,23,0.14);
}

.ws-tab .bx {
  font-size: 0.9rem;
}

.ws-tab-content {
  animation: wsFadeIn 0.15s ease;
  padding-top: 10px;
}

@keyframes wsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}


/* ══════════════════════════════════════════════════════════════════
   WORKFLOWS TAB — Devices + Forms
   ──────────────────────────────────────────────────────────────────
   Each card is a plain, transparent box with just a border — not a
   filled tile — with a small bg-elevated icon square sitting inside
   it near the top. Title and meta sit below. The card's actions
   (assign/duplicate/delete, or just delete for devices) float as a
   small pill in the outer box's own bottom-right corner, hidden until
   hover/focus. Devices and Forms are two sections of the exact same
   card shape, so they share one set of classes.

   Section header spacing is still pulled from the Projects dashboard
   (project-home.css): title→grid gap 12px, section→section gap 26px.
══════════════════════════════════════════════════════════════════ */
.ws-flow-section + .ws-flow-section {
  margin-top: 26px;
}

.ws-flow-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
}

.ws-flow-section-title h3 {
  font-size: 0.95rem;
  font-weight: var(--fw-bold, 700);
  color: var(--ink, #1a1210);
  margin: 0;
}

.ws-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
  gap: 12px;
}

.ws-flow-card-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.ws-flow-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  background: transparent;
  border: 1px solid var(--border, rgba(43,24,23,0.12));
  border-radius: var(--r-card, 14px);
  transition: border-color 0.16s ease;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.ws-flow-card:hover {
  border-color: var(--border, rgba(43,24,23,0.28));
}

.ws-flow-card-wrap.assign-open .ws-flow-card {
  border-color: var(--ink-muted, #8f817b);
}

/* Icon bar spans the card's full width, icon centred within it. */
.ws-flow-card-icon {
  flex-shrink: 0;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--ink-soft);
  opacity: 70%;
  border-radius: 8px;
}

.ws-flow-card-icon i {
  font-size: 18px;
  line-height: 1;
}

/* Bottom row: body text on the left, actions on the right, both
   anchored to the same baseline so the buttons sit level with the
   card's last line of text rather than the card's own corner. */
.ws-flow-card-content {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
}

.ws-flow-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.ws-flow-card-name {
  font-size: var(--text-sm, 0.78rem);
  font-weight: var(--fw-semi, 600);
  color: var(--ink, #1a1210);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-flow-card-desc {
  font-size: 0.68rem;
  color: var(--ink-soft, #5f5551);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-flow-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.66rem;
  color: var(--ink-muted, #8f817b);
  min-width: 0;
  overflow: hidden;
}

.ws-flow-card-meta > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ws-flow-card-dot { opacity: 0.5; flex-shrink: 0; }

.ws-flow-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  overflow: hidden;
}

.ws-flow-card-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0px 8px;
  border-radius: 8px;
  background: var(--sidebar-bg);
  color: var(--ink-muted, #8f817b);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 80%;
}

/* Actions — plain icon buttons, no pill/background of their own,
   sized a bit larger than the tab's usual small icon button, sitting
   level with the bottom text row via .ws-flow-card-content above. */
.ws-flow-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.ws-flow-card-actions .icon-btn-sm {
  width: 26px;
  height: 26px;
  min-width: 26px;
  font-size: 0.78rem;
}

/* The whole actions row (assign, duplicate, delete alike) stays hidden
   until the card is hovered or one of its buttons has focus, so the
   card reads as plain text at rest. Touch devices have no hover, so
   it's shown plainly there instead. */
.ws-flow-card:hover .ws-flow-card-actions,
.ws-flow-card-wrap.assign-open .ws-flow-card-actions,
.ws-flow-card-actions:focus-within {
  opacity: 1;
}
@media (hover: none) {
  .ws-flow-card-actions { opacity: 1; }
}

.ws-flow-empty {
  grid-column: 1 / -1;
  font-size: var(--text-sm, 0.74rem);
  color: var(--ink-muted, #8f817b);
  padding: 18px 2px;
}

@media (max-width: 600px) {
  .ws-flow-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* ══════════════════════════════════════════════════════════════════
   ASSIGNMENTS MODULE
   Shared between the workspace.html admin tab, the projects.html
   "Assigned to You" section, and the assign/reassign modal's
   publication picker. All three group publications by project (where
   applicable) then by search tag, using one collapsible pattern:
   .asn-tag-group > .asn-tag-header (click to expand) + .asn-tag-body.
   A tag whose publications are all approved renders as a static,
   greyed-out, non-interactive row (.asn-tag-group--done) instead.
   Spacing/type below is pulled from the design tokens in
   design-alignment.css (--space-*, --text-*, --fw-*) rather than
   one-off values, and skeleton loading reuses skeleton.css's
   .skel-row / .skel-bar primitives — see wsAssignTableBody,
   #assignPubPicker and #atyGroups in assignments.js.
══════════════════════════════════════════════════════════════════ */

/* ── Ref ID + status pill (used everywhere a publication is listed) ── */
.asn-refid {
  font-size: var(--text-xs, 0.65rem);
  font-weight: var(--fw-semi, 600);
  color: var(--ink-muted, #8f817b);
  background: var(--bg-page, #f2efea);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: 5px;
  padding: 2px var(--space-2, 8px);
  flex-shrink: 0;
  white-space: nowrap;
  box-sizing: border-box;
}

.asn-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-3, 12px);
  border-radius: 20px;
  font-size: var(--text-xs, 0.65rem);
  font-weight: var(--fw-semi, 600);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
}
.asn-status-pill i { font-size: 11px; }
.asn-status-pill.approved {
  background: var(--green-soft, rgba(5,150,105,0.10));
  color: var(--green, #059669);
}
.asn-status-pill.awaiting {
  background: var(--amber-soft, rgba(217,119,6,0.10));
  color: var(--amber, #d97706);
}
.asn-status-pill.unsummarised {
  background: var(--bg-page, #f2efea);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  color: var(--ink-muted, #8f817b);
}

.asn-note-hint {
  color: var(--ink-muted, #8f817b);
  font-size: 13px;
  flex-shrink: 0;
  cursor: help;
  display: flex;
  align-items: center;
}

/* Rotating chevron — admin/ATY summary rows AND every tag header */
.asn-chevron {
  font-size: 15px;
  color: var(--ink-muted, #8f817b);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.asn-chevron--open { transform: rotate(180deg); }


/* ══════════════════════════════════════════════════════════════════
   ADMIN TAB — one row per assignee (workspace.html #wsAssignTableBody)
══════════════════════════════════════════════════════════════════ */
.asn-user-row {
  cursor: pointer;
  transition: background 0.12s;
}
.asn-user-row:hover { background: var(--bg-page); }
.asn-user-row td { box-sizing: border-box; }
.asn-user-row.skel-row:hover { background: transparent; }

.asn-user-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-width: 0;
}

/* Keep the "you" pill hugging the name itself rather than drifting to
   the far edge of the (often much wider) assignee column — override
   .ws-member-name's flex-grow just in this cell so the name box only
   takes the width of its text before the pill sits right after it. */
.asn-user-cell .ws-member-name {
  flex: 0 1 auto;
}

.asn-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--space-3, 12px);
  border-radius: 20px;
  background: var(--teal-soft, rgba(13,167,154,0.10));
  border: 1px solid var(--teal-border, rgba(13,167,154,0.20));
  color: var(--teal-dim, #0b8f84);
  font-size: var(--text-xs, 0.65rem);
  font-weight: var(--fw-semi, 600);
  white-space: nowrap;
}
.asn-count-pill--proj {
  background: var(--bg-page, #f2efea);
  border-color: var(--border, rgba(43,24,23,0.10));
  color: var(--ink-soft, #5f5551);
}

.asn-user-detail-row td { padding: 0 !important; border-bottom: 1px solid rgba(43,24,23,0.05); }
.asn-user-detail-cell {
  background: var(--bg-page, #faf8f6);
  padding: 0 !important;
}
.asn-detail-inner {
  padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  box-sizing: border-box;
  overflow: visible;
}

/* ── Project grouping (shared by admin detail + ATY detail) ── */
.asn-proj-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  min-width: 0;
}

.asn-proj-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-md, 0.78rem);
  font-weight: var(--fw-bold, 700);
  color: var(--ink, #1a1210);
}
.asn-proj-label i { color: var(--teal, #0da79a); font-size: 14px; }

/* ── Collapsible search-tag group ───────────────────────────────────
   Shared by admin detail, ATY detail, AND the assign-modal picker
   (.asn-tag-group.asn-picker-group). Click the header to expand/
   collapse the body. Fully-approved tags use .asn-tag-header--static
   (a plain div, not a button) inside .asn-tag-group--done — nothing
   to expand, and the whole row is visually disabled. ── */
.asn-tag-group {
  display: flex;
  flex-direction: column;
  margin-left: 4px;
  padding-left: var(--space-3, 12px);
  border-left: 2px solid var(--border, rgba(43,24,23,0.08));
  min-width: 0;
}

.asn-tag-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  padding: var(--space-1, 4px) 0;
  margin: 0;
  font-size: var(--text-xs, 0.62rem);
  font-weight: var(--fw-semi, 600);
  letter-spacing: 0.03em;
  color: var(--ink-muted, #8f817b);
  cursor: pointer;
  text-align: left;
  transition: color 0.12s;
}
.asn-tag-header i:first-child { font-size: 12px; flex-shrink: 0; }
.asn-tag-header:hover { color: var(--ink-soft, #5f5551); }
.asn-tag-header:hover i:first-child { color: var(--teal, #0da79a); }

.asn-tag-header--static { cursor: default; }
.asn-tag-header--static:hover { color: var(--ink-muted, #8f817b); }
.asn-tag-header--static:hover i:first-child { color: var(--ink-muted, #8f817b); }

.asn-tag-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asn-tag-meta {
  margin-left: auto;
  padding-left: var(--space-2, 8px);
  font-size: var(--text-xs, 0.60rem);
  font-weight: var(--fw-semi, 600);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-muted, #8f817b);
  white-space: nowrap;
  flex-shrink: 0;
}

.asn-tag-body {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) 0 var(--space-1, 4px);
}
.asn-tag-group.expanded > .asn-tag-body { display: flex; }

/* Picker variant: chips wrap in a row instead of stacking as rows */
.asn-tag-body.asn-picker-chip-row { flex-direction: row; flex-wrap: wrap; }

/* Fully-approved tag: greyed out, static, nothing to expand */
.asn-tag-group--done {
  border-left-color: var(--border, rgba(43,24,23,0.06));
  opacity: 0.6;
}

.asn-tag-done-note,
.asn-picker-done-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 1px var(--space-2, 8px);
  border-radius: 20px;
  background: var(--green-soft, rgba(5,150,105,0.08));
  color: var(--green, #059669);
  font-size: 0.60rem;
  font-weight: var(--fw-semi, 600);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.asn-tag-done-note i,
.asn-picker-done-tag i { font-size: 11px; }

/* Single collapsible "Approved" group replacing per-tag done rows — one
   header for the whole project, body holds a wrapping row of compact
   chips (one per fully-approved search tag). Reuses .asn-tag-group /
   .asn-tag-header / .asn-tag-body so the existing toggleTagGroup /
   toggleModalTagGroup handlers work unchanged, but is styled as its own
   contained box (soft green tint, full border, rounded corners) rather
   than the plain border-left indent used for the still-pending tags —
   it's a record of finished work, not another item on the task list. */
.asn-tag-group--approved-summary {
  margin-left: 0;
  margin-top: var(--space-2, 8px);
  padding-left: 0;
  border-left: none;
  border: 1px solid var(--bg-elevated);
  border-radius: 10px;
  background: var(--bg-page);
}
.asn-tag-group--approved-summary > .asn-tag-header {
  padding: var(--space-2, 8px) var(--space-3, 12px);
}
.asn-tag-group--approved-summary > .asn-tag-header i:first-child { color: var(--green, #059669); }
.asn-tag-group--approved-summary > .asn-tag-body {
  padding: 0 var(--space-3, 12px) var(--space-2, 8px);
}

/* Approved-tag chip: just the tag name, styled like the rest of the
   app's neutral chips (.asn-refid-chip / .asn-refid) — no title, no
   uppercase, just a small check accent to signal "done". */
.asn-tag-approved-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs, 0.66rem);
  font-weight: var(--fw-semi, 600);
  color: var(--ink-soft, #5f5551);
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(43,24,23,0.14));
  border-radius: 20px;
  padding: 3px var(--space-2, 8px);
  white-space: nowrap;
}
.asn-tag-approved-chip i { font-size: 12px; color: var(--green, #059669); }

.asn-pub-detail-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--space-2, 8px);
  border-radius: 20px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(43,24,23,0.08));
  transition: border-color 0.12s;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
}
.asn-pub-detail-row:hover { border-color: var(--border-hover, rgba(43,24,23,0.18)); }
.asn-pub-detail-row[onclick] { cursor: pointer; }
.asn-pub-detail-row[onclick]:hover { background: var(--bg-page, #faf8f6); }

/* The outer row is already the chip (pill background + border) — strip
   .asn-refid's own background/border/radius here so the REFID text sits
   flush in it instead of showing as a chip nested inside a chip. */
.asn-pub-detail-row .asn-refid {
  background: none;
  border: none;
  padding: 0;
}

/* Options menu — single kebab button replaces the old inline
   reassign/open/remove trio of buttons on each publication chip. */
.asn-options-wrap {
  position: relative;
  display: flex;
  flex-shrink: 0;
}
.asn-options-btn {
  background: none;
  border: none;
  font-family: inherit;
  padding: 3px 5px;
  border-radius: 6px;
  color: var(--ink-muted, #8f817b);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.asn-options-btn:hover {
  color: var(--ink, #1a1210);
  background: var(--bg-page, #f2efea);
}
.asn-options-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  right: auto;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: 8px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.14);
  z-index: 200;
  min-width: 175px;
  padding: 4px;
}
.asn-option-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink, #1a1210);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.asn-option-item i { font-size: 14px; flex-shrink: 0; color: var(--ink-muted, #8f817b); }
.asn-option-item:hover { background: var(--bg-page, #f2efea); }
.asn-option-item--danger { color: var(--red, #dc2626); }
.asn-option-item--danger i { color: var(--red, #dc2626); }
.asn-option-item--danger:hover { background: var(--red-soft, rgba(220,38,38,0.08)); }


/* ══════════════════════════════════════════════════════════════════
   ASSIGNED TO YOU — projects.html #assignedToYouSection
══════════════════════════════════════════════════════════════════ */
.aty-section {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: var(--r-card, 14px);
  margin-bottom: var(--space-4, 16px);
  overflow: hidden;
  box-sizing: border-box;
}

.aty-header {
  display: none; /* the summary row below carries the count now */
}

.aty-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  cursor: pointer;
  transition: background 0.12s;
}
.aty-summary-row:hover { background: var(--bg-page); }
.aty-summary-row.skel-row:hover { background: transparent; }

.aty-summary-left {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  font-size: var(--text-md, 0.80rem);
  font-weight: var(--fw-semi, 600);
  color: var(--ink, #1a1210);
  min-width: 0;
}
.aty-summary-left i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--amber-soft, rgba(217,119,6,0.10));
  color: var(--amber-dim, #b45309);
  font-size: 16px;
  flex-shrink: 0;
}
.aty-summary-left span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aty-detail {
  padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  border-top: 1px solid var(--border, rgba(43,24,23,0.08));
  box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════════
   ASSIGN MODAL — New Assignment / Reassign (workspace.html #assignModal)
══════════════════════════════════════════════════════════════════ */
.asn-pub-picker-empty {
  padding: var(--space-4, 16px) var(--space-2, 8px);
  text-align: center;
  font-size: var(--text-sm, 0.72rem);
  color: var(--ink-muted, #8f817b);
}

/* Fully-assigned/approved variant — a clearer heading + icon rather than
   a single line of muted text, since this is a distinct resolved state
   rather than a loading/error placeholder. */
.asn-pub-picker-empty--done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-5, 20px) var(--space-3, 12px);
}
.asn-pub-picker-empty--done i {
  font-size: 22px;
  color: var(--teal, #0da79a);
  margin-bottom: 2px;
}
.asn-pub-picker-empty-title {
  font-size: var(--text-sm, 0.78rem);
  font-weight: var(--fw-semi, 600);
  color: var(--ink, #1a1210);
}
.asn-pub-picker-empty-sub {
  font-size: var(--text-xs, 0.68rem);
  color: var(--ink-muted, #8f817b);
}

/* Scrollable container for the grouped picker — keeps the modal from
   growing unbounded when a project has a lot of search tags. */
#assignPubPicker {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  border-radius: 10px;
  background: var(--bg-page, #faf8f6);
  box-sizing: border-box;
}

.asn-refid-chip {
  font-size: var(--text-xs, 0.66rem);
  font-weight: var(--fw-semi, 600);
  color: var(--ink-soft, #5f5551);
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, rgba(43,24,23,0.14));
  border-radius: 20px;
  padding: 4px var(--space-3, 12px);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.asn-refid-chip:hover { border-color: var(--teal-border, rgba(13,167,154,0.35)); color: var(--teal-dim, #0b8f84); }

.asn-refid-chip--selected {
  background: var(--teal, #0da79a);
  border-color: var(--teal, #0da79a);
  color: #fff;
}
.asn-refid-chip--selected:hover { color: #fff; }

.asn-refid-chip--assigned {
  border-color: var(--amber-border, rgba(217,119,6,0.35));
  color: var(--amber-dim, #b45309);
}

.asn-refid-chip--approved,
.asn-refid-chip:disabled {
  background: var(--bg-elevated, #f2efea);
  border-color: var(--border, rgba(43,24,23,0.08));
  color: var(--ink-muted, #8f817b);
  cursor: not-allowed;
  opacity: 0.6;
}

.asn-edit-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
  border-radius: 8px;
  background: var(--bg-page, #faf8f6);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  box-sizing: border-box;
}

.asn-edit-summary-title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md, 0.78rem);
  font-weight: var(--fw-medium, 500);
  color: var(--ink, #1a1210);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sub-description line under a card header (e.g. Assignments card) —
   sits full-width below the header instead of inline within it. */
.ws-card-subdesc {
  font-size: var(--text-xs, 0.68rem);
  color: var(--ink-muted, #8f817b);
  line-height: var(--lh-normal, 1.55);
  padding: 0 var(--space-5, 20px) var(--space-3, 12px);
  margin: 0;
}


@media (max-width: 640px) {
  .aty-summary-left span { white-space: normal; font-size: var(--text-sm, 0.74rem); }
  .asn-tag-meta { display: none; }
}