/**
 * TubeRaker — Entries sub-app page styles
 * ----------------------------------------------------------------------------
 * The nine entries/*.html templates reference a large composite/utility class
 * vocabulary (page-header, stat-card, entry-card, chip, filter-bar, step-bar,
 * status-progress, timeline, banner, hero, ring-chart, drop-zone, tag-input,
 * toggle-list, etc.) that is NOT defined in the eight shared stylesheets. This
 * file implements that vocabulary using ONLY design tokens from variables.css.
 *
 * Rules honoured throughout:
 *   - rem only (no px anywhere)
 *   - colours only via var(--…); theme handled by the [data-theme] token switch
 *   - mobile-first; every layout reflows at 22.5rem and scales up
 *   - interactive targets >= 2.75rem
 *   - motion is globally reduced-motion-guarded by animations.css
 * Loaded AFTER the eight shared stylesheets, so a small number of deliberate
 * augmentations/overrides of shared classes (.card, .progress-bar, .btn--icon)
 * apply only on entries pages.
 */

/* ===========================================================================
   0. Token aliases / locally-scoped tokens
   Every colour in the rules below is referenced via var(--…). The only place
   literals live is this block — exactly how variables.css and the shared
   components.css house their literals (e.g. `.btn--primary { color: white }`).

   Two of these tokens cannot map onto an existing variables.css token today:

   --color-on-brand : text/icons placed on the theme-INDEPENDENT brand gradient
     and brand-fill surfaces (cards, hero, banner, badges, chips, buttons). The
     gradient (--color-brand-primary → --color-brand-secondary) is defined only
     in :root and is NOT re-mapped for light mode, so it renders the same mid-
     tone blue→violet in both themes and always needs white text. --text-inverse
     is deliberately NOT used here: it flips per theme (#0f172a dark / #ffffff
     light), which would paint dark text on the gradient in dark mode. This
     mirrors the shared convention `.btn--primary { color: white }`.
   --color-overlay-hover : subtle light wash for hover states sitting on the
     brand gradient (hero social buttons). No white-alpha token exists.

   A shared-token request to promote both into variables.css is filed in
   shared_requests; until it lands the literals are centralised here only.

   The analytics ring SVG also hard-codes stroke="var(--color-border)" /
   stroke="var(--color-primary)"; those names don't exist in variables.css, so
   they are aliased here too (never a second colour literal).
   =========================================================================== */
:root {
  --color-primary: var(--color-brand-primary);
  --color-border: var(--border-primary);
  --color-on-brand: #ffffff;
  --color-overlay-hover: rgba(255, 255, 255, 0.15);
}

/* ===========================================================================
   1. Text / utility helpers the templates rely on
   =========================================================================== */
.text-muted { color: var(--text-secondary); }
.text-danger { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.is-hidden { display: none !important; }

/* Inline icon colour helpers used in dynamically-built markup */
.icon--blue { color: var(--color-info); }
.icon--sky { color: var(--color-brand-primary-light); }
.icon--green { color: var(--color-success); }
.icon--purple { color: var(--color-brand-secondary); }
.icon--pink { color: var(--color-brand-secondary); }
.icon--red { color: var(--color-error); }
.icon--yellow { color: var(--color-brand-accent); }
.icon--muted { color: var(--text-tertiary); }
.icon--warning { color: var(--color-warning); }
.icon--success { color: var(--color-success); }
.icon--info { color: var(--color-info); }
.icon--danger { color: var(--color-error); }

/* ===========================================================================
   2. Alert double-dash aliases (single-dash exist in components.css)
   =========================================================================== */
.alert--info { background-color: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info); }
.alert--success { background-color: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.alert--warning { background-color: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.alert--error,
.alert--danger { background-color: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }

/* ===========================================================================
   3. Page header
   =========================================================================== */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.page-header h1 { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xs); }
.page-header p { margin-bottom: 0; }
.page-header__left {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  min-width: 0;
}
.page-header__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}
/* Right-hand action cluster pushes right and, when only the header block and a
   trailing action exist, keeps the primary CTA at the far edge on wider views. */
@media (min-width: 40rem) {
  .page-header__right { margin-left: auto; }
  .page-header > a:last-child,
  .page-header > button:last-child { margin-left: auto; }
  .page-header h1 { font-size: var(--font-size-3xl); }
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-md);
}

/* ===========================================================================
   4. Grid helpers  (base .grid provides display:grid + gap from layout.css)
   =========================================================================== */
.grid--2col { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.grid--3col { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.grid--4col { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }

.stat-grid { gap: var(--spacing-md); }
/* Stat rows: 1 col at 22.5rem, 2 up ~30rem, 4 up at md */
.grid--4col.stat-grid { grid-template-columns: 1fr; }
@media (min-width: 30rem) { .grid--4col.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .grid--4col.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Sidebar layout: single column on mobile, main + fixed aside at lg */
.grid--sidebar { grid-template-columns: 1fr; gap: var(--spacing-lg); align-items: start; }
.grid__main { min-width: 0; }
.grid__aside { min-width: 0; }
@media (min-width: 64rem) {
  .grid--sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
}

/* Vertical stack used inside grid columns and single-column forms */
.form-stack { display: flex; flex-direction: column; gap: var(--spacing-lg); }

/* ===========================================================================
   5. Cards  (augment shared .card with a visible border + subtle shadow;
   add the double-underscore element classes + modifiers the markup uses)
   =========================================================================== */
.card {
  border: 0.0625rem solid var(--border-primary);
  box-shadow: var(--shadow-sm);
}
.card--inner {
  background-color: var(--bg-secondary);
  box-shadow: none;
}
.card--bordered { border-color: var(--border-secondary); }
.card--sticky { position: static; }
@media (min-width: 64rem) {
  .card--sticky {
    position: sticky;
    top: calc(3.75rem + var(--spacing-md));
  }
}
.card--gradient {
  background-image: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
  border-color: transparent;
  color: var(--color-on-brand);
}
.card--gradient h3,
.card--gradient h4,
.card--gradient .card__title { color: var(--color-on-brand); }
.card--gradient .tip-list li { color: var(--color-on-brand); }

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}
.card__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md);
}
.card__header .card__title { margin: 0; }
.card__title i { color: var(--color-brand-primary); }

/* ===========================================================================
   6. Buttons — modifiers missing from components.css
   =========================================================================== */
.btn--full { width: 100%; }
.btn--primary-ghost {
  background-color: transparent;
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.btn--primary-ghost:hover:not(:disabled) {
  background-color: var(--color-brand-primary);
  color: var(--color-on-brand);
}
.btn--danger-ghost {
  background-color: transparent;
  color: var(--color-error);
  border-color: transparent;
}
.btn--danger-ghost:hover:not(:disabled) {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}
.btn--warning {
  background-color: var(--color-warning);
  color: var(--color-on-brand);
  border-color: var(--color-warning);
}
.btn--warning:hover:not(:disabled) { filter: brightness(1.05); }

/* Ensure icon-only buttons always meet the 2.75rem touch target,
   even when combined with .btn--sm (used for pagination / card actions). */
.btn--icon,
.btn-icon,
.btn--icon.btn--sm,
.btn-icon.btn-sm {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.btn-stack { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.btn-group { display: inline-flex; border-radius: var(--radius-md); overflow: hidden; }
.btn-group .btn { border-radius: 0; }

/* ===========================================================================
   7. Badges — status + semantic colour map (base .badge in components.css)
   =========================================================================== */
.badge--primary { background-color: var(--color-brand-primary); color: var(--color-on-brand); }
.badge--secondary,
.badge--light,
.badge--default { background-color: var(--bg-tertiary); color: var(--text-primary); }
.badge--success,
.badge--approved { background-color: var(--color-success-bg); color: var(--color-success); }
.badge--warning,
.badge--draft { background-color: var(--color-warning-bg); color: var(--color-warning); }
.badge--info,
.badge--pending { background-color: var(--color-info-bg); color: var(--color-info); }
.badge--purple,
.badge--in_review { background-color: var(--bg-tertiary); color: var(--color-brand-secondary); }
.badge--danger,
.badge--rejected,
.badge--disqualified { background-color: var(--color-error-bg); color: var(--color-error); }
.badge--withdrawn { background-color: var(--color-warning-bg); color: var(--color-warning); }
.badge--award {
  background-image: linear-gradient(135deg, var(--color-brand-accent), var(--color-brand-accent-hover));
  color: var(--color-on-brand);
}

/* ===========================================================================
   8. Filter bar / chips / search / view toggle
   =========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.filter-bar__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.filter-bar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
@media (max-width: 39.9375rem) {
  .filter-bar__controls { width: 100%; }
  .filter-bar__controls .search-input { flex: 1 1 100%; }
  .filter-bar__controls .form-select { flex: 1 1 100%; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 2.75rem;
  padding: 0 var(--spacing-md);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-full);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.chip:hover { border-color: var(--border-secondary); color: var(--text-primary); }
.chip:active { transform: scale(0.97); }
.chip--active,
.chip.is-active {
  background-color: var(--color-brand-primary);
  border-color: transparent;
  color: var(--color-on-brand);
}
.chip__count { opacity: 0.85; font-size: var(--font-size-xs); }

.search-input { position: relative; display: flex; align-items: center; }
.search-input i {
  position: absolute;
  left: var(--spacing-md);
  color: var(--text-tertiary);
  pointer-events: none;
}
.search-input__field {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--input-padding-y) var(--input-padding-x);
  padding-left: calc(var(--spacing-md) + 1.25rem + var(--spacing-sm));
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}
.search-input__field::placeholder { color: var(--text-tertiary); }
.search-input__field:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  background-color: var(--bg-primary);
}

.view-toggle { display: inline-flex; gap: var(--spacing-xs); }
.view-toggle .btn.is-active {
  background-color: var(--color-brand-primary);
  color: var(--color-on-brand);
  border-color: var(--color-brand-primary);
}

/* ===========================================================================
   9. Stat cards
   =========================================================================== */
.stat-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.stat-card__label { margin: 0 0 var(--spacing-xs); }
.stat-card__value {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
}
.stat-card__value--green { color: var(--color-success); }
.stat-card__value--blue { color: var(--color-info); }
.stat-card__value--purple { color: var(--color-brand-secondary); }
.stat-card__change { margin: var(--spacing-xs) 0 0; font-size: var(--font-size-sm); }
.stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}
.stat-card__icon--blue { background-color: var(--color-info-bg); color: var(--color-info); }
.stat-card__icon--green { background-color: var(--color-success-bg); color: var(--color-success); }
.stat-card__icon--purple { background-color: var(--bg-tertiary); color: var(--color-brand-secondary); }
.stat-card__icon--red { background-color: var(--color-error-bg); color: var(--color-error); }
.stat-card__icon--yellow { background-color: var(--color-warning-bg); color: var(--color-brand-accent); }

/* ===========================================================================
   10. Entry cards (my_entries)
   =========================================================================== */
.entry-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.entry-card:hover,
.entry-card:focus-within {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-secondary);
}
.entry-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--bg-tertiary);
  overflow: hidden;
}
.entry-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.entry-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--font-size-3xl);
  color: var(--text-tertiary);
}
.entry-card__badge { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); }
.entry-card__actions { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); display: flex; gap: var(--spacing-xs); }
.entry-card__actions .btn {
  background-color: var(--bg-modal-overlay);
  color: var(--color-on-brand);
  border-color: transparent;
}
.entry-card__contest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-on-brand);
  background: linear-gradient(to top, var(--bg-modal-overlay), transparent);
}
.entry-card__contest i { color: var(--color-brand-accent); }
.entry-card__body { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); }
.entry-card__title {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry-card__desc {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry-card__stats { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.entry-card__stats span { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.entry-card__footer { margin-top: auto; padding-top: var(--spacing-xs); }

/* ===========================================================================
   11. Portfolio items + hero + stat row + masonry
   =========================================================================== */
.hero { border-radius: var(--radius-2xl); padding: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
.hero--gradient {
  background-image: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
  color: var(--color-on-brand);
}
.hero--gradient h1,
.hero--gradient strong { color: var(--color-on-brand); }
.hero__content { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-lg); }
.hero__info { flex: 1 1 16rem; min-width: 0; }
.hero__info h1 { margin-bottom: var(--spacing-xs); }
.hero__sub { margin: 0 0 var(--spacing-sm); opacity: 0.9; }
.hero__bio { margin: 0 0 var(--spacing-md); opacity: 0.95; }
.hero__social { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-top: var(--spacing-md); }
.hero__social .btn { color: var(--color-on-brand); border-color: transparent; }
.hero__social .btn:hover { background-color: var(--color-overlay-hover); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

.stat-row { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); }
.stat-row__item { display: flex; flex-direction: column; }
.stat-row__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.1; }
.stat-row__label { font-size: var(--font-size-xs); opacity: 0.85; }
.stat-row--sm { gap: var(--spacing-md); }
.stat-row--sm .stat-row__value { font-size: var(--font-size-lg); color: var(--text-primary); }
.stat-row--sm .stat-row__label { color: var(--text-secondary); }

.portfolio-item {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.portfolio-item:hover,
.portfolio-item:focus-visible { transform: translateY(-0.125rem); box-shadow: var(--shadow-lg); }
.portfolio-item:focus-visible { outline: 0.125rem solid var(--color-brand-primary); outline-offset: 0.125rem; }
.portfolio-item__thumb { position: relative; aspect-ratio: 16 / 9; background-color: var(--bg-tertiary); overflow: hidden; }
.portfolio-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-item__placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: var(--font-size-3xl); color: var(--text-tertiary);
}
.portfolio-item__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--spacing-md);
  color: var(--color-on-brand);
  background: linear-gradient(to top, var(--bg-modal-overlay), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.portfolio-item:hover .portfolio-item__overlay,
.portfolio-item:focus-within .portfolio-item__overlay { opacity: 1; }
.portfolio-item__overlay h3 { color: var(--color-on-brand); font-size: var(--font-size-base); margin-bottom: var(--spacing-xs); }
.portfolio-item__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.portfolio-item__meta span { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.portfolio-item__cat { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); }

.masonry-grid { columns: 1; column-gap: var(--spacing-md); }
.masonry-grid > * { break-inside: avoid; margin-bottom: var(--spacing-md); }
@media (min-width: 40rem) { .masonry-grid { columns: 2; } }
@media (min-width: 64rem) { .masonry-grid { columns: 3; } }

/* Avatar size modifiers (components.css only ships single-dash avatar-*) */
.avatar--sm { width: 2.5rem; height: 2.5rem; font-size: var(--font-size-sm); }
.avatar--md { width: 3rem; height: 3rem; }
.avatar--xl { width: 4.5rem; height: 4.5rem; font-size: var(--font-size-2xl); }

/* ===========================================================================
   12. Forms — hints, counters, toggles, tag input, drop zone, file list
   =========================================================================== */
.form-hint {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.char-counter { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.char-counter--warning { color: var(--color-warning); }
.char-counter--danger { color: var(--color-error); }

/* Accessible switch built on a bare <input type=checkbox class=form-toggle> */
.form-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  flex-shrink: 0;
  background-color: var(--bg-tertiary);
  border: 0.125rem solid var(--border-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.form-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background-color: var(--text-primary);
  transform: translateY(-50%);
  transition: left var(--transition-fast);
}
.form-toggle:checked {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.form-toggle:checked::after {
  left: calc(100% - 1rem - 0.1875rem);
  background-color: var(--color-on-brand);
}
.form-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.toggle-list { display: flex; flex-direction: column; }
.toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 0.0625rem solid var(--border-primary);
  cursor: pointer;
}
.toggle-item:last-child { border-bottom: 0; }
.toggle-item > div { min-width: 0; }
.toggle-item__label { display: block; font-weight: var(--font-weight-medium); color: var(--text-primary); }
.toggle-item__hint { margin: var(--spacing-xs) 0 0; }

.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 2.75rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--bg-secondary);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}
.tag-input-wrap:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.tag-input-wrap__input {
  flex: 1;
  min-width: 8rem;
  min-height: 2rem;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}
.tag-input-wrap__input:focus { outline: none; }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-top: var(--spacing-sm); }
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.25rem 0.625rem;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}
.tag-pill--sm { font-size: var(--font-size-xs); }
.tag-pill__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.375rem -0.25rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.tag-pill__remove:hover { background-color: var(--bg-hover); color: var(--text-primary); }
.tag-pill__remove:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--spacing-xl);
  text-align: center;
  background-color: var(--bg-secondary);
  border: 0.125rem dashed var(--border-secondary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.drop-zone:hover { border-color: var(--color-brand-primary); background-color: var(--bg-hover); }
.drop-zone:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-brand-primary); }
.drop-zone--active { border-color: var(--color-brand-primary); background-color: var(--color-info-bg); }
.drop-zone--compact { padding: var(--spacing-md); }
.drop-zone__inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); }
.drop-zone__icon { font-size: var(--font-size-3xl); color: var(--text-tertiary); }
.drop-zone__title { margin: 0; font-weight: var(--font-weight-medium); color: var(--text-primary); }
.drop-zone__subtitle { margin: 0; }
.drop-zone__formats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-xs); }
.drop-zone__formats span { display: inline-flex; align-items: center; gap: var(--spacing-xs); }

.file-list { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.file-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  background-color: var(--bg-secondary);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-md);
}
.file-item--new { border-style: dashed; border-color: var(--color-success); }
.file-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: var(--bg-tertiary);
  overflow: hidden;
}
.file-item__thumb { width: 100%; height: 100%; object-fit: cover; }
.file-item__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-item__name { overflow-wrap: anywhere; color: var(--text-primary); }
.file-item__size { color: var(--text-secondary); }
.file-item__actions { display: flex; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; }

/* Form-action element modifiers (single-dash exist in forms.css) */
.form-actions__right { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-left: auto; }
.form-actions--full { width: 100%; }
.form-actions--center { justify-content: center; }
@media (max-width: 47.9375rem) {
  .form-actions__right { width: 100%; margin-left: 0; }
  .form-actions__right .btn { width: 100%; }
}

/* ===========================================================================
   13. Step bar (metadata / preview)
   =========================================================================== */
.step-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  overflow-x: auto;
  margin-bottom: var(--spacing-lg);
}
.step-bar__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
}
.step-bar__step > span:last-child { white-space: nowrap; }
.step-bar__step i,
.step-bar__step > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  border: 0.125rem solid var(--border-primary);
  color: var(--text-secondary);
}
.step-bar__step--completed { color: var(--color-success); }
.step-bar__step--completed i,
.step-bar__step--completed > span:first-child {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-on-brand);
}
.step-bar__step--active { color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }
.step-bar__step--active i,
.step-bar__step--active > span:first-child {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-on-brand);
}
.step-bar__connector { flex: 1; min-width: 1.5rem; height: 0.125rem; background-color: var(--border-primary); }
.step-bar__connector--done { background-color: var(--color-success); }

/* ===========================================================================
   14. Status progress rail (status.html)
   =========================================================================== */
.status-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  overflow-x: auto;
  padding-block: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.status-step { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; }
.status-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  border: 0.125rem solid var(--border-primary);
  color: var(--text-secondary);
}
.status-step__label { font-size: var(--font-size-xs); color: var(--text-secondary); text-transform: capitalize; white-space: nowrap; }
.status-step--done .status-step__dot { background-color: var(--color-success); border-color: var(--color-success); color: var(--color-on-brand); }
.status-step--current .status-step__dot { border-color: var(--color-brand-primary); color: var(--color-brand-primary); box-shadow: 0 0 0 0.1875rem var(--color-info-bg); }
.status-step--current .status-step__label { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.status-step__line { flex: 1; min-width: 1.25rem; height: 0.125rem; background-color: var(--border-primary); }
.status-step__line--done { background-color: var(--color-success); }

.status-msg { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.status-msg > i { font-size: var(--font-size-xl); margin-top: 0.125rem; flex-shrink: 0; }
.status-msg h4 { margin: 0 0 var(--spacing-xs); }
.status-msg p { margin: 0; }

/* ===========================================================================
   15. Timeline (status.html)
   =========================================================================== */
.timeline { position: relative; display: flex; flex-direction: column; gap: var(--spacing-lg); padding-left: 0.5rem; }
.timeline__item { display: flex; gap: var(--spacing-md); align-items: flex-start; }
.timeline__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.timeline__dot--blue { background-color: var(--color-info-bg); color: var(--color-info); }
.timeline__dot--green { background-color: var(--color-success-bg); color: var(--color-success); }
.timeline__dot--purple { background-color: var(--bg-tertiary); color: var(--color-brand-secondary); }
.timeline__dot--red { background-color: var(--color-error-bg); color: var(--color-error); }
.timeline__dot--yellow { background-color: var(--color-warning-bg); color: var(--color-brand-accent); }
.timeline__content { flex: 1; min-width: 0; padding: var(--spacing-md); }
.timeline__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-sm); }
.timeline__header h4 { margin: 0; font-size: var(--font-size-base); }
.timeline__content p { margin: var(--spacing-xs) 0 0; }

/* ===========================================================================
   16. Banners + preview thumb + info list + tips
   =========================================================================== */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-lg);
}
.banner--gradient {
  background-image: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
  color: var(--color-on-brand);
}
.banner--gradient h2,
.banner--gradient strong { color: var(--color-on-brand); }
.banner--gradient p { color: var(--color-on-brand); opacity: 0.9; margin: 0; }
.banner--cta { background-color: var(--bg-secondary); border: 0.0625rem solid var(--border-primary); text-align: center; flex-direction: column; }
.banner__right { text-align: right; display: flex; flex-direction: column; }
.banner__center { flex: 1; }
.banner__center h3 { margin-bottom: var(--spacing-xs); }

.preview-thumb {
  aspect-ratio: 16 / 9;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}
.preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.preview-thumb__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--font-size-3xl);
  color: var(--text-tertiary);
}
.preview-title { margin: 0 0 var(--spacing-xs); font-size: var(--font-size-lg); overflow-wrap: anywhere; }
.preview-desc { margin: 0 0 var(--spacing-md); }

.info-list { display: flex; flex-direction: column; gap: var(--spacing-sm); margin: 0; }
.info-list__row { display: flex; justify-content: space-between; gap: var(--spacing-md); }
.info-list__row dt { color: var(--text-secondary); margin: 0; }
.info-list__row dd { color: var(--text-primary); margin: 0; text-align: right; overflow-wrap: anywhere; }
.info-list--sm { font-size: var(--font-size-sm); }

.tip-list { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-sm); margin: 0; padding: 0; }
.tip-list li { display: flex; align-items: flex-start; gap: var(--spacing-sm); font-size: var(--font-size-sm); }
.tip-list li i { margin-top: 0.2rem; flex-shrink: 0; }

/* ===========================================================================
   17. Entry preview (preview.html) + gallery + settings grid
   =========================================================================== */
.entry-preview__header { margin-bottom: var(--spacing-md); }
.entry-preview__author { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.entry-preview__author > div { min-width: 0; display: flex; flex-direction: column; }
.entry-preview__author .badge { margin-left: auto; }
.entry-preview__title { margin: 0 0 var(--spacing-sm); overflow-wrap: anywhere; }
.entry-preview__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.entry-preview__meta span { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.entry-preview__body { margin-top: var(--spacing-md); }
.entry-preview__body > p { overflow-wrap: anywhere; }

.gallery { display: grid; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.gallery__img,
.gallery__video { width: 100%; border-radius: var(--radius-lg); background-color: var(--bg-tertiary); }
.gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-3xl);
  color: var(--text-tertiary);
}

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--spacing-sm); }
.settings-grid__item { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); }

/* Modal helpers used by preview/portfolio dynamic content */
.modal__image { width: 100%; max-width: 100%; border-radius: var(--radius-lg); background-color: var(--bg-secondary); object-fit: cover; }
.modal__stats { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-md); }
.modal__stats span { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xl);
  background-color: var(--bg-secondary);
}
.modal__icon--green { background-color: var(--color-success-bg); color: var(--color-success); }
/* Enforce the modal contract (85vh, scrollable body, fixed header/footer) */
.modal-overlay .modal__body { max-height: 70vh; overflow-y: auto; }
.modal-overlay .modal { max-height: 85vh; }

/* ===========================================================================
   18. Analytics charts
   =========================================================================== */
.chart-area { overflow-x: auto; }
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-xs);
  height: 14rem;
  min-width: 18rem;
  margin-bottom: var(--spacing-md);
}
.bar-chart__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--spacing-xs); flex: 1; min-width: 1rem; height: 100%; }
.bar-chart__bar {
  width: 100%;
  min-height: 0.25rem;
  background-color: var(--color-brand-primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height var(--transition-slow);
}
.bar-chart__label { white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-md); font-size: var(--font-size-xs); color: var(--text-secondary); }
.chart-legend__item { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.chart-legend__dot { width: 0.75rem; height: 0.75rem; border-radius: var(--radius-full); background-color: var(--text-tertiary); }
.chart-legend__dot--primary { background-color: var(--color-brand-primary); }
.chart-legend__dot--muted { background-color: var(--text-tertiary); }

.source-list { display: flex; flex-direction: column; gap: var(--spacing-md); }
.source-item { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.source-item__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); font-size: var(--font-size-sm); }
.source-item__name { display: inline-flex; align-items: center; gap: var(--spacing-sm); overflow-wrap: anywhere; }

/* Override shared .progress-bar so it acts as the TRACK; __fill is the value */
.progress-bar { width: 100%; height: 0.5rem; background-color: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar__fill { height: 100%; border-radius: var(--radius-full); background-color: var(--color-brand-primary); transition: width var(--transition-base); }
.progress-bar__fill--blue { background-color: var(--color-info); }
.progress-bar__fill--sky { background-color: var(--color-brand-primary-light); }
.progress-bar__fill--pink { background-color: var(--color-brand-secondary); }
.progress-bar__fill--green { background-color: var(--color-success); }
.progress-bar__fill--muted { background-color: var(--text-tertiary); }
.progress-bar__fill--default { background-color: var(--color-brand-primary); }

.geo-item { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.geo-item__info { display: flex; align-items: center; gap: var(--spacing-sm); min-width: 0; }
.geo-item__info > div { display: flex; flex-direction: column; min-width: 0; }

.ring-chart { position: relative; width: 9rem; max-width: 100%; margin: 0 auto var(--spacing-md); }
.ring-chart__svg { width: 100%; height: auto; transform: rotate(-90deg); }
.ring-chart__svg path { transition: stroke-dasharray var(--transition-slow); }
.ring-chart__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ring-chart__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.ring-chart__sub { display: block; }

.activity-feed { display: flex; flex-direction: column; gap: var(--spacing-md); }
.activity-item { display: flex; gap: var(--spacing-sm); align-items: flex-start; }
.activity-item__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.activity-item__dot--blue { background-color: var(--color-info-bg); color: var(--color-info); }
.activity-item__dot--green { background-color: var(--color-success-bg); color: var(--color-success); }
.activity-item__dot--purple { background-color: var(--bg-tertiary); color: var(--color-brand-secondary); }
.activity-item__dot--red { background-color: var(--color-error-bg); color: var(--color-error); }
.activity-item__content { min-width: 0; }
.activity-item__content p { margin: 0; overflow-wrap: anywhere; }

/* ===========================================================================
   19. Empty / loading / error state primitives + pagination
   =========================================================================== */
.empty-state,
.state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl) var(--spacing-lg);
}
.empty-state__icon,
.state-block__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: var(--font-size-2xl);
}
.empty-state h3,
.state-block h3 { margin: 0; }
.empty-state p,
.state-block p { margin: 0; max-width: 32rem; }

.inline-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background-color: var(--color-error-bg);
  border: 0.0625rem solid var(--color-error);
  color: var(--color-error);
}
.inline-error__msg { flex: 1; min-width: 12rem; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}
.pagination__info { margin: 0; }
.pagination__controls { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }

/* Skeleton block sizing helpers (base .skeleton shimmer lives in animations.css) */
.skeleton-card { height: 18rem; border-radius: var(--radius-xl); }
.skeleton-line { height: 1rem; border-radius: var(--radius-sm); }
.skeleton-stat { height: 1.75rem; width: 60%; border-radius: var(--radius-sm); }

/* ===========================================================================
   20. Small spacing utilities (migrated from inline style attributes so no
   hard-coded rem/color values live in the templates)
   =========================================================================== */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }

/* ===========================================================================
   21. Submit media preview (migrated from inline styles in submit.html)
   16 / 9 embed frame, contained image preview, and link/document rows —
   all token-only so the template markup carries no literal sizes/colours.
   =========================================================================== */
.media-preview__frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--bg-tertiary);
}
.media-preview__frame iframe { width: 100%; height: 100%; border: 0; }
.media-preview__img {
  width: 100%;
  max-height: 18rem;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background-color: var(--bg-tertiary);
}
.media-preview__note { margin-top: var(--spacing-sm); }
.media-preview__link { display: flex; align-items: center; gap: var(--spacing-sm); }
.media-preview__link > i { font-size: var(--font-size-2xl); flex-shrink: 0; }
.media-preview__link > div { min-width: 0; }
.media-preview__link p { overflow-wrap: anywhere; margin: 0; }

/* ===========================================================================
   22. Alert layout helpers (migrated from inline style on submit/upload alerts)
   =========================================================================== */
.alert--top { align-items: flex-start; }
.alert--center { align-items: center; }
.alert-content--grow { flex: 1; }
.alert-action--fixed { flex-shrink: 0; }

/* Plain (undecorated) media link used inside the status sidebar thumb */
.link-plain { text-decoration: none; }

/* ===========================================================================
   23. Analytics geo fallback chip (self-contained replacement for the
   external flagcdn.com image — CSP-safe, token-only)
   =========================================================================== */
.geo-item__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.5rem;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-sm);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

/* ===========================================================================
   24. Status stepper — subtle current-step pulse (reduced-motion guarded)
   =========================================================================== */
@keyframes entry-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0.1875rem var(--color-info-bg); }
  50% { box-shadow: 0 0 0 0.4375rem var(--color-info-bg); }
}
.status-step--current .status-step__dot {
  animation: entry-status-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .status-step--current .status-step__dot { animation: none; }
}