/* ═══════════════════════════════════════════════════════════════
   UJIYARI — Subject Tags
═══════════════════════════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-semibold);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.tag:hover { opacity: 0.85; transform: scale(1.03); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Subject tag colors */
.tag--polity                  { background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.tag--economy                 { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
.tag--environment             { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.tag--science-tech            { background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.tag--international-relations { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.tag--history-culture         { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.tag--geography               { background:#ccfbf1; color:#115e59; border-color:#99f6e4; }
.tag--social-issues           { background:#fce7f3; color:#9d174d; border-color:#fbcfe8; }
.tag--security-defence        { background:#f1f5f9; color:#334155; border-color:#e2e8f0; }
.tag--reports-schemes         { background:#e0f2fe; color:#075985; border-color:#bae6fd; }
.tag--persons-awards          { background:#ffedd5; color:#9a3412; border-color:#fed7aa; }

/* ── Collapsible tags toggle (mobile) ──────────────────────── */

/* The toggle button — hidden on desktop, shown on mobile */
.tags-toggle {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-semibold);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.tags-toggle:hover { background: var(--color-border); }
.tags-toggle[aria-expanded="true"] { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

/* On mobile: hide tag list, show toggle */
@media (max-width: 767px) {
  .tags-toggle { display: inline-flex; }
  .tag-list--collapsible { display: none; }
  .tags-toggle[aria-expanded="true"] + .tag-list--collapsible { display: flex; flex-wrap: wrap; gap: var(--space-2); }
}

/* GS badge in editorial page-header (dark background) */
.gs-badge-header {
  background: rgba(232,131,10,0.2);
  color: #fbbf24;
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: var(--font-bold);
}

/* ── Editorial meta info bar ──────────────────────────────── */

.editorial-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.editorial-meta-bar__np {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.editorial-meta-bar__np-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-extrabold);
}

.editorial-meta-bar__np-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.editorial-meta-bar__sep {
  color: var(--color-border);
  font-size: var(--text-lg);
}

.editorial-meta-bar__gs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.editorial-meta-bar__gs-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* On desktop: toggle hidden, details always visible */
.editorial-meta-bar__toggle { display: none; }
.editorial-meta-bar__details { display: contents; }

/* On mobile: collapse GS + subject tags behind toggle */
@media (max-width: 767px) {
  .editorial-meta-bar__toggle { display: inline-flex; }
  .editorial-meta-bar__details { display: none; }
  .editorial-meta-bar__toggle[aria-expanded="true"] ~ .editorial-meta-bar__details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    width: 100%;
  }
  /* Hide separators when collapsed/expanded on mobile — cleaner look */
  .editorial-meta-bar__details .editorial-meta-bar__sep { display: none; }
}

/* Subject section headers (monthly/yearly) */
.subject-section              { margin-bottom: var(--space-12); }

.subject-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.subject-section__header--polity              { background:#dbeafe; border-left:4px solid #1d4ed8; }
.subject-section__header--economy             { background:#d1fae5; border-left:4px solid #065f46; }
.subject-section__header--environment         { background:#dcfce7; border-left:4px solid #166534; }
.subject-section__header--science-tech        { background:#ede9fe; border-left:4px solid #5b21b6; }
.subject-section__header--international-relations { background:#fef3c7; border-left:4px solid #92400e; }
.subject-section__header--history-culture     { background:#fee2e2; border-left:4px solid #991b1b; }
.subject-section__header--geography           { background:#ccfbf1; border-left:4px solid #115e59; }
.subject-section__header--social-issues       { background:#fce7f3; border-left:4px solid #9d174d; }
.subject-section__header--security-defence    { background:#f1f5f9; border-left:4px solid #334155; }
.subject-section__header--reports-schemes     { background:#e0f2fe; border-left:4px solid #075985; }
.subject-section__header--persons-awards      { background:#ffedd5; border-left:4px solid #9a3412; }

.subject-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  font-weight: var(--font-bold);
}

.subject-section__body {
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--space-6);
}