/* ── Admin Dashboard Styles ────────────────────────────────── */

.admin-body { overflow: hidden; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .event-card, .cf-btn, .rail-item, .refresh-btn, .week-arrow,
  .msel-trigger, .fchip, .fchip-select, .sort-btn, .stab, .bulk-bar .bulk-act,
  .card-add-list, .wm-btn, .modal-btn, .page-btn {
    transition: none !important;
  }
  .event-card:hover { transform: none !important; }
  .refresh-btn:hover { transform: none !important; }
  .bulk-bar .bulk-act:hover { transform: none !important; }
}

/* ── Filter Bar ── */
.filter-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.status-tabs {
  display: flex;
  align-items: stretch;
  padding: 0 20px;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.stab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
  margin-bottom: -1px;
}
.stab:hover { color: var(--text2); }
.stab.active { color: var(--text); }
.stab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stab.all.active        { border-bottom-color: var(--text3); }
.stab.pending.active    { border-bottom-color: var(--amber); color: var(--amber); }
.stab.staged.active     { border-bottom-color: #a07cd6; color: #a07cd6; }
.stab.approved.active   { border-bottom-color: var(--green); color: var(--green); }
.stab.published.active  { border-bottom-color: var(--blue);  color: var(--blue); }
.stab.rejected.active   { border-bottom-color: var(--red);   color: var(--red); }
.stab.archived.active   { border-bottom-color: var(--text3); color: var(--text3); }
.stab-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
}
.stab.pending.active  .stab-count { background: rgba(224,153,64,0.15); border-color: rgba(224,153,64,0.25); color: var(--amber); }
.stab.staged.active   .stab-count { background: rgba(160,124,214,0.15); border-color: rgba(160,124,214,0.25); color: #a07cd6; }
.stab.approved.active .stab-count { background: rgba(61,187,124,0.15); border-color: rgba(61,187,124,0.25); color: var(--green); }
.stab.published.active .stab-count { background: rgba(90,142,216,0.15); border-color: rgba(90,142,216,0.25); color: var(--blue); }
.stab.rejected.active .stab-count { background: rgba(212,85,85,0.12); border-color: rgba(212,85,85,0.20); color: var(--red); }

/* Row 2: Secondary filters */
.filter-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 5px 10px;
  min-width: 220px;
  transition: border-color 0.15s;
}
.search-box:focus-within { border-color: var(--gold); }
.search-box input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  width: 100%;
}
.search-box input::placeholder { color: var(--text3); }
.search-box .search-clear {
  display: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text3);
  line-height: 0;
  flex-shrink: 0;
}
.search-box .search-clear:hover { color: var(--text); }
.search-box input:not(:placeholder-shown) ~ .search-clear { display: inline-flex; }
.filter-chips {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;          /* never spill onto a second row */
  align-items: center;
  flex: 1 1 0;                /* grow to fill row, but allow shrinking */
  min-width: 0;               /* required so flex-shrink can clip */
  overflow: hidden;           /* anything past the edge gets moved into More */
  position: relative;         /* anchor for #morePopover */
}

/* "More ▾" trigger and its popover ── populated dynamically when the chip
   row would otherwise overflow. */
.fchip.more-trigger {
  flex-shrink: 0;
}
.more-popover {
  /* Positioned by toggleMorePopover() in admin-app.js using
     moreTrigger.getBoundingClientRect(). `fixed` so it escapes
     .filter-chips' overflow:hidden without needing a positioned ancestor. */
  position: fixed;
  z-index: 60;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
}
.more-popover[hidden] { display: none; }
.more-popover > * { width: 100%; }
.more-popover .csel,
.more-popover .msel,
.more-popover .fchip-select { width: 100%; }
.more-popover .csel-trigger,
.more-popover .msel-trigger { width: 100%; justify-content: space-between; }
.fchip, .fchip-select {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--bg3);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.fchip:hover, .fchip-select:hover { border-color: var(--border3); color: var(--text); }
.fchip:focus-visible, .fchip-select:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.fchip.active {
  background: rgba(200,146,74,0.12);
  border-color: rgba(200,146,74,0.3);
  color: var(--gold-lt);
}
.fchip.reset-chip { border-color: rgba(212,85,85,0.3); color: var(--red); }
.fchip.reset-chip:hover { background: rgba(212,85,85,0.1); }
.fchip-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239e9aaa' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 10px;
}
.fchip-select:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23e8e4f0' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.fchip-select option {
  background: var(--bg2, #1e1a28);
  color: var(--text, #e8e4f0);
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 6px 10px;
}
.fchip-select:focus option:checked,
.fchip-select option:hover {
  background: rgba(200, 146, 74, 0.18);
  color: var(--gold-lt, #e8c88a);
}

/* ── Custom themed dropdown (csel.js) ──────────────────────── */
.csel {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.csel-native {
  /* Keep accessibility/form semantics but hide visually */
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.csel-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--bg3);
  color: var(--text2);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.csel-trigger:hover { border-color: var(--border3); color: var(--text); }
.csel-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.csel.is-open .csel-trigger {
  border-color: var(--gold, #c8924a);
  color: var(--text);
}
.csel-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csel-chevron {
  display: inline-flex;
  color: var(--text3);
  transition: transform 0.15s;
}
.csel.is-open .csel-chevron { transform: rotate(180deg); color: var(--gold, #c8924a); }

.csel-list {
  position: absolute;
  left: 0;
  min-width: 100%;
  max-width: min(360px, 90vw);
  max-height: min(480px, 70vh);
  overflow-y: auto;
  background: var(--bg2, #1e1a28);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 4px;
  z-index: 10020;
  display: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.csel.is-open .csel-list { display: block; }
.csel-option {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.25;
}
.csel-option:hover,
.csel-option.is-hover { background: rgba(255,255,255,0.05); color: var(--text); }
.csel-option.is-selected {
  background: rgba(200, 146, 74, 0.15);
  color: var(--gold-lt, #e8c88a);
  font-weight: 600;
}
.csel-option.is-selected:hover { background: rgba(200, 146, 74, 0.22); }
.csel-option.is-disabled { color: var(--text3); cursor: not-allowed; }

/* Fit the size of wrapped <select>: inherit width for full-row use cases */
.csel-modal {
  display: flex;
  width: 100%;
}
.csel-modal .csel-trigger {
  width: 100%;
  font-size: 13px;
  padding: 7px 10px;
}
.csel-range .csel-trigger {
  height: 28px;
  padding: 0 10px;
  font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace;
  border-radius: 6px;
}

/* ── Custom themed datepicker (cdate.js) ── */
.cdate {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.cdate-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.cdate-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--bg3);
  color: var(--text2);
  padding: 5px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.cdate-trigger:hover { border-color: var(--border3); color: var(--text); }
.cdate.is-open .cdate-trigger,
.cdate.has-value .cdate-trigger { border-color: var(--gold, #c8924a); color: var(--text); }
/* Disabled state — when the underlying native input has [disabled], dim the
   themed trigger so users can see the field is inert (clicks already no-op
   in cdate.js). Triggered by JS adding .is-disabled to the wrapper. */
.cdate.is-disabled { opacity: 0.45; pointer-events: none; }
.cdate.is-disabled .cdate-trigger { cursor: not-allowed; }
.cdate-icon { display: inline-flex; color: var(--text3); }
.cdate.has-value .cdate-icon,
.cdate.is-open .cdate-icon { color: var(--gold, #c8924a); }
.cdate-label { letter-spacing: 0.2px; }
.cdate-range .cdate-trigger { height: 28px; padding: 0 10px; border-radius: 6px; }
.cdate-modal { width: 100%; }
.cdate-modal .cdate-trigger {
  width: 100%;
  justify-content: flex-start;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  padding: 7px 10px;
}
.cdate-time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.cdate-time label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.cdate-time-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color-scheme: dark;
}
.cdate-time-input:focus { outline: none; border-color: var(--gold, #c8924a); }

.cdate-pop {
  display: none;
  background: var(--bg2, #1e1a28);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 10px;
  z-index: 10030;
  width: 260px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cdate-pop.is-open { display: block; }
.cdate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cdate-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
}
.cdate-nav {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--bg3);
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s;
}
.cdate-nav:hover { border-color: var(--gold, #c8924a); color: var(--gold-lt, #e8c88a); }
.cdate-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.cdate-dow span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.5px;
  padding: 4px 0;
  text-transform: uppercase;
}
.cdate-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cdate-cell {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.1s;
  font-family: inherit;
}
.cdate-cell:hover:not(:disabled) {
  background: rgba(200, 146, 74, 0.12);
  color: var(--gold-lt, #e8c88a);
}
.cdate-cell.is-today:not(.is-selected) {
  border-color: var(--border3);
  color: var(--text);
}
.cdate-cell.is-selected {
  background: var(--gold, #c8924a);
  color: #1a1420;
  font-weight: 700;
}
.cdate-cell.is-empty { visibility: hidden; cursor: default; }
.cdate-foot {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.cdate-ft-btn {
  flex: 1;
  padding: 5px 10px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text2);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.cdate-ft-btn:hover { border-color: var(--gold, #c8924a); color: var(--gold-lt, #e8c88a); }

/* ── Multi-select dropdown ── */
.msel {
  position: relative;
}
.msel-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--bg3);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  user-select: none;
}
.msel-trigger:hover { border-color: var(--border3); color: var(--text); }
.msel-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.msel-trigger.has-selection {
  background: rgba(200,146,74,0.12);
  border-color: rgba(200,146,74,0.3);
  color: var(--gold-lt);
}
.msel-trigger .msel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(200,146,74,0.25);
  color: var(--gold-lt);
  font-size: 10px;
  font-weight: 700;
}
.msel-trigger .msel-arrow {
  margin-left: 2px;
  transition: transform 0.15s;
}
.msel.open .msel-trigger .msel-arrow { transform: rotate(180deg); }
.msel.open .msel-trigger { border-color: var(--gold, #c8924a); color: var(--text); }
.msel-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  max-height: min(480px, 70vh);
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 60;
  padding: 4px 0;
}
.msel.open .msel-dropdown { display: block; }
.msel-dropdown::-webkit-scrollbar { width: 4px; }
.msel-dropdown::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.msel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: var(--text2);
  transition: background 0.1s;
}
.msel-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.msel-item input[type="checkbox"] {
  accent-color: var(--gold, #c8924a);
  width: 14px;
  height: 14px;
  margin: 0 2px 0 0;
  cursor: pointer;
}
.msel-item.checked,
.msel-item:has(input:checked) {
  background: rgba(200, 146, 74, 0.15);
  color: var(--gold-lt, #e8c88a);
  font-weight: 600;
}
.msel-done {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px 4px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  position: sticky;
  bottom: 0;
  background: var(--bg2);
}
.msel-done-btn {
  background: var(--gold, #c8924a);
  color: #1a1420;
  border: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.msel-done-btn:hover { background: var(--gold-lt, #e8c88a); }
.msel-check {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border3);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.1s;
}
.msel-item.checked .msel-check {
  background: var(--gold);
  border-color: var(--gold);
}
.msel-item.checked .msel-check svg { display: block; }
.msel-check svg { display: none; width: 10px; height: 10px; }
.msel-item-label { flex: 1; }
.msel-item-count {
  font-size: 10px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.msel-clear {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: var(--red);
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.msel-clear:hover { background: rgba(212,85,85,0.06); }

.filter-row2-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Content Area ── */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
/* When a results-bar is the first thing in the content area (events grid,
   news grid), pull it up so it sits flush with the filter chrome above.
   Without this, the .content's 20px top padding leaves the bar floating
   far from the filter row. -16px leaves a tight 4px breathing gap. */
.content > .results-bar:first-child {
  margin-top: -16px;
}

/* ── Cards Grid (4-col) ── */

/* ── Results bar (single row containing count + pagination) ── */
/* Lives BOTH above and below the grid. Top bar always renders; bottom
   bar only when there's more than one page (no point duplicating just
   the count at the foot of the list). */
/* 3-column grid: count on the left, pagination centered, third cell empty
   (reserved for a page-size select or similar later). Grid keeps the
   centered slot truly centered regardless of how wide the count grows
   ("Showing 1–50 of 7,598 events" vs "Showing 1 of 1"). */
.results-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 4px 0;            /* tight: ~40px total (32px button + 8) */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.results-bar .results-count { grid-column: 1; justify-self: start; }
.results-bar .pagination    { grid-column: 2; justify-self: center; }
.results-bar.results-bar-bottom {
  margin-bottom: 0;
  margin-top: 10px;
}
.results-bar .results-count {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: 0.012em;
  white-space: nowrap;
}
/* Bold numbers in primary text colour, with a hair of horizontal margin so
   they don't visually clamp the surrounding "Showing / of / events" words.
   Keeping them text (not gold) reserves gold for actionable elements. */
.results-bar .results-count b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0 3px;
}
/* Legacy header kept for any caller that still uses it, but we don't
   emit it from admin-app.js anymore. */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sort-wrap {
  position: relative;
}
.sort-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text2);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.sort-btn:hover { color: var(--text); border-color: var(--border3); }
.sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.sort-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 170px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 60;
  padding: 4px 0;
}
.sort-wrap.open .sort-dropdown { display: block; }
.sort-option {
  padding: 7px 12px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: var(--text2);
  transition: background 0.1s;
}
.sort-option:hover { background: var(--bg3); }
.sort-option.active { color: var(--gold-lt); font-weight: 600; }
[data-theme="light"] .sort-dropdown {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ── Event Card Grid ── */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 640px)  { .admin-grid { grid-template-columns: 1fr; } }

/* Floating bulk action bar */
.bulk-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg2); border-top: 2px solid var(--amber); padding: 12px 24px; display: flex; align-items: center; gap: 12px; z-index: 90; transform: translateY(100%); transition: transform 0.25s ease; box-shadow: 0 -4px 20px rgba(0,0,0,0.4); }
.bulk-bar.show { transform: translateY(0); }
.bulk-bar .bulk-count { font-size: 14px; font-weight: 600; color: var(--amber); min-width: 120px; }
.bulk-bar .bulk-actions { display: flex; gap: 8px; flex: 1; }
.bulk-bar .bulk-act { padding: 8px 18px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.bulk-bar .bulk-act:hover { transform: translateY(-1px); }
.bulk-bar .bulk-act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bulk-bar .bulk-act.approve { background: rgba(61,214,140,0.12); color: var(--green); border-color: rgba(61,214,140,0.3); }
.bulk-bar .bulk-act.approve:hover { background: rgba(61,214,140,0.25); }
.bulk-bar .bulk-act.reject { background: rgba(255,90,90,0.08); color: var(--red); border-color: rgba(255,90,90,0.2); }
.bulk-bar .bulk-act.reject:hover { background: rgba(255,90,90,0.15); }
.bulk-bar .bulk-act.publish { background: rgba(90,142,216,0.12); color: var(--blue); border-color: rgba(90,142,216,0.3); }
.bulk-bar .bulk-act.publish:hover { background: rgba(90,142,216,0.25); }
.bulk-bar .bulk-act.clear { background: var(--bg3); color: var(--text3); }
.bulk-bar .bulk-act.clear:hover { color: var(--text); }

/* ── Event Card (mockup design) ── */
.event-card {
  background: var(--bg3);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  background: var(--bg4);
}
.event-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.event-card.is-rejected { opacity: 0.55; }
.event-card.is-rejected:hover { opacity: 0.8; }

/* Staged state — subtle card-level tint + left accent. Heavy lifting of
   "this is staged" is done by the .cf-btn.staged-state pill below.
   Note: outer .event-card class uses an s- prefix on the status name
   (s-staged, s-published, etc.) — see renderCard in admin-app.js. */
.event-card.s-staged {
  background: linear-gradient(90deg, rgba(160,124,214,0.10) 0%, rgba(160,124,214,0.02) 30%, transparent 100%);
  border-left: 3px solid #a07cd6;
}

/* Step badge on Stage / Publish buttons — clarifies which click of the
   two-step review the user is about to make. Used by both card footer
   chips (.cf-btn.is-first-pass, .cf-btn.is-second-pass) and modal
   buttons (.modal-btn.is-second-pass). */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  font-weight: 700;
  font-size: 13px;
  color: inherit;
  opacity: 0.9;
}
.cf-btn.is-second-pass,
.modal-btn.is-second-pass {
  background: rgba(90,142,216,0.20);
  border-color: rgba(90,142,216,0.50);
  box-shadow: inset 0 0 0 1px rgba(90,142,216,0.15);
}
.cf-btn.is-second-pass:hover,
.modal-btn.is-second-pass:hover { background: rgba(90,142,216,0.30); }
.event-card.selected { outline: 2px solid rgba(200,146,74,0.4); background: var(--bg4); }

/* Status top bar — the thicker accent. Pairs with the lighter
   per-status side + bottom border on .event-card below. */
.card-status-bar { height: 4px; flex-shrink: 0; }
/* Top status ribbon — thin amber bar for unreviewed/pending (no label,
   default state), labeled solid ribbon for every other state so the
   state name reads at a glance and the footer can stay action-only. */
.card-status-bar.pending     { background: var(--amber); height: 4px; }
.card-status-bar.unreviewed  { background: var(--text3); opacity: 0.4; height: 4px; }
.card-status-bar.staged,
.card-status-bar.approved,
.card-status-bar.published,
.card-status-bar.rejected {
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
}
.card-status-bar.staged    { background: #a07cd6; }
.card-status-bar.staged::after    { content: 'STAGED'; }
.card-status-bar.published { background: var(--blue); }
.card-status-bar.published::after { content: '✓ PUBLISHED'; }
.card-status-bar.approved  { background: var(--green); }
.card-status-bar.approved::after  { content: 'APPROVED'; }
.card-status-bar.rejected  { background: var(--red); opacity: 0.75; }
.card-status-bar.rejected::after  { content: '✗ DISMISSED'; }

/* Per-status border on .event-card itself: 1px on right/bottom/left,
   tinted to match the status color but at lower alpha than the top bar
   so the top reads as the primary accent. The .card-status-bar div sits
   inside the card and provides the thicker top stripe. */
.event-card.s-pending {
  border-right:  1px solid rgba(224,153,64,0.35);
  border-bottom: 1px solid rgba(224,153,64,0.35);
  border-left:   1px solid rgba(224,153,64,0.35);
}
.event-card.s-published {
  border-right:  1px solid rgba(90,142,216,0.35);
  border-bottom: 1px solid rgba(90,142,216,0.35);
  border-left:   1px solid rgba(90,142,216,0.35);
}
.event-card.s-approved {
  border-right:  1px solid rgba(61,187,124,0.35);
  border-bottom: 1px solid rgba(61,187,124,0.35);
  border-left:   1px solid rgba(61,187,124,0.35);
}
.event-card.s-rejected {
  border-right:  1px solid rgba(212,85,85,0.30);
  border-bottom: 1px solid rgba(212,85,85,0.30);
  border-left:   1px solid rgba(212,85,85,0.30);
}

/* Image area */
.card-img-area {
  position: relative;
  height: 140px;
  overflow: hidden;
}
.card-img-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* News cards: lock to 16:9 with object-fit:cover. The dominant case is
   the generated elevator card (also 16:9) — for those, cover and contain
   are equivalent, no letterbox. Source photos (portrait/square/landscape)
   get center-cropped to fit, which keeps card heights uniform across the
   grid instead of letting tall portraits stretch their column.
   align-self:start kept so the grid doesn't row-stretch siblings.
   Earlier (cf4d3a4) we had aspect-ratio:auto here, which fixed the
   letterbox-on-elevator-cards complaint but caused vertical stretching
   on portrait sources. 16:9 + cover is the right balance. */
.card--news { align-self: start; }
.card--news .card-img-area {
  height: auto;
  aspect-ratio: 16 / 9;
}
.card--news .card-img-area img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.card--news .card-img-area > .card-img-gradient {
  aspect-ratio: 16 / 9;
}
.card-img-gradient {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card-img-gradient::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.cat-icon { opacity: 0.22; position: relative; z-index: 1; }

/* Category gradients */
.grad-music   { background: linear-gradient(160deg, #1A0830, #2A1045 50%, #1A0828); }
.grad-art     { background: linear-gradient(160deg, #0A1828, #102040 50%, #0A1625); }
.grad-food    { background: linear-gradient(160deg, #1E0E04, #301808 50%, #1E0C02); }
.grad-sport   { background: linear-gradient(160deg, #041A10, #082818 50%, #041810); }
.grad-theatre { background: linear-gradient(160deg, #1C0808, #2E1212 50%, #1A0808); }
.grad-family  { background: linear-gradient(160deg, #0A1220, #101E35 50%, #081220); }
.grad-film    { background: linear-gradient(160deg, #0D0D1A, #1A1A30 50%, #0D0D18); }
.grad-festival { background: linear-gradient(160deg, #1A1005, #2E1A08 50%, #1A0E05); }
.grad-heritage { background: linear-gradient(160deg, #120E08, #201808 50%, #100C08); }
.grad-markets { background: linear-gradient(160deg, #0A1410, #122018 50%, #081210); }
.grad-community { background: linear-gradient(160deg, #0E0A18, #1A1228 50%, #0C0A15); }
.grad-default { background: linear-gradient(160deg, #0D0C0A, #1A1815 50%, #0D0C0A); }

/* Score overlay on image */
.score-overlay {
  position: absolute;
  bottom: 9px; left: 11px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.score-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.score-number.high { color: var(--green); }
.score-number.mid  { color: var(--amber); }
.score-number.low  { color: var(--red); }
.score-max {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 1px;
}

/* Select checkbox */
.card-select {
  position: absolute;
  top: 9px; left: 9px;
  z-index: 5;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 11px;
  color: transparent;
}
.card-select:hover { border-color: var(--amber); }
.event-card.selected .card-select { border-color: var(--amber); background: var(--amber); color: #fff; }

/* Status chip on image */
/* Scheduling-week lock chip — bottom-right of the card image. The other
   three corners are taken (top-left: card-select, top-right: bookmark,
   bottom-left: score), so the lock lives bottom-right. Overlays hide at
   rest and fade in on hover (see clean-grid block below). */
.card-lock-chip {
  position: absolute;
  bottom: 9px; right: 9px;
  z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: help;
}
.card-lock-chip.locked-here       { background: rgba(80,200,120,0.22);  color: #7FD29A; border: 1px solid rgba(80,200,120,0.40); }
.card-lock-chip.locked-elsewhere  { background: rgba(246,195,67,0.22); color: #F6C343; border: 1px solid rgba(246,195,67,0.40); }

/* Hover overlay with action buttons */
/* Add-to-list bookmark on the image — hover-only, top-right, just left of
   the status chip. Same fade-in pattern as the other image overlays. */
.card-add-list {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 5;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.event-card:hover .card-add-list { opacity: 1; pointer-events: auto; }
.card-add-list:hover { background: rgba(200,146,74,0.40); border-color: rgba(200,146,74,0.7); }

/* Already in a list: solid amber, filled bookmark, always visible (not
   hover-gated) so analysts can see at a glance which cards are saved. */
.card-add-list.is-added {
  opacity: 1;
  pointer-events: auto;
  color: var(--amber);
  background: rgba(200,146,74,0.22);
  border-color: rgba(200,146,74,0.55);
}
.card-add-list.is-added svg { fill: currentColor; }
.card-add-list.is-added:hover { background: rgba(200,146,74,0.40); border-color: rgba(200,146,74,0.78); }

/* Clean-grid mode (all roles): image surface stays clean at rest. Status
   chip, full lock chip, bulk-select checkbox, and suitability score fade
   in on hover. A compact lock-icon overlay (.card-lock-icon) stays
   visible at rest so analysts know an event is bound to a week without
   hovering — it tucks into the corner under the full chip when hover
   reveals the chip. Footer (Publish/Approve/Dismiss buttons) stays
   visible at rest — the user prefers always-actionable affordances over
   a cleaner image surface. */
.card-lock-chip,
.card-select,
.score-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.event-card:hover .card-lock-chip,
.event-card:hover .card-select,
.event-card:hover .score-overlay,
.event-card.selected .card-select {
  opacity: 1;
  pointer-events: auto;
}
.event-card { border-radius: 0; }
.card-img-area {
  height: auto;
  aspect-ratio: 16 / 9;
}
.card-img-area img {
  object-fit: contain;
  background: var(--bg2);
}

/* Compact rest-state lock icon. Visible whenever the event is bound to
   a week, regardless of whether that week is the current calendar
   selection. On hover it fades out as the full .card-lock-chip fades in
   at the same spot — they share bottom-right positioning so the
   transition is in-place. */
.card-lock-icon {
  position: absolute;
  bottom: 9px; right: 9px;
  z-index: 4;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  cursor: help;
  transition: opacity 0.15s;
}
.card-lock-icon.locked-here       { background: rgba(80,200,120,0.22);  border: 1px solid rgba(80,200,120,0.40); }
.card-lock-icon.locked-elsewhere  { background: rgba(246,195,67,0.22); border: 1px solid rgba(246,195,67,0.40); }
.event-card:hover .card-lock-icon { opacity: 0; pointer-events: none; }

/* Card body */
.card-body {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.card-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title-translated {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text3);
  font-style: italic;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text3);
}
.meta-row svg { flex-shrink: 0; opacity: 0.7; }

.card-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.cpill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
}
.cpill.cat  { background: rgba(200,146,74,0.1); border: 1px solid rgba(200,146,74,0.2); color: var(--gold-lt); }
.cpill.free { background: rgba(61,187,124,0.1); border: 1px solid rgba(61,187,124,0.2); color: var(--green); }
.cpill.paid { background: rgba(224,153,64,0.08); border: 1px solid rgba(224,153,64,0.15); color: var(--amber); }
.cpill.src  { background: var(--bg4); border: 1px solid var(--border2); color: var(--text3); }
.cpill.fall { background: rgba(138,104,220,0.1); border: 1px solid rgba(138,104,220,0.2); color: #B094EC; }
.cpill.curated { background: rgba(200,146,74,0.15); border: 1px solid rgba(200,146,74,0.3); color: var(--gold-lt); }
.cpill.recycled { background: rgba(246,195,67,0.14); border: 1px solid rgba(246,195,67,0.34); color: #F6C343; }
/* Duration chips — neutral blue family, one subtle variant per type */
.cpill.dur.oneday     { background: rgba(100,140,200,0.08); border: 1px solid rgba(100,140,200,0.18); color: #8DB4E2; }
.cpill.dur.shortrun   { background: rgba(100,140,200,0.12); border: 1px solid rgba(100,140,200,0.24); color: #A5C4E8; }
.cpill.dur.exhibition { background: rgba(100,140,200,0.16); border: 1px solid rgba(100,140,200,0.32); color: #BDD4F0; }
.cpill.dur.permanent  { background: rgba(100,140,200,0.20); border: 1px solid rgba(100,140,200,0.40); color: #CFDEF4; }
.cpill.dur.recurring  { background: rgba(168,132,214,0.12); border: 1px solid rgba(168,132,214,0.25); color: #C9B1E6; }
/* Time-unknown chip — muted warning */
.cpill.notime { background: rgba(224,153,64,0.06); border: 1px dashed rgba(224,153,64,0.25); color: var(--amber); font-style: italic; }
[data-theme="light"] .cpill.dur.oneday     { background: rgba(54,98,160,0.06); border-color: rgba(54,98,160,0.18); color: #3D6EB3; }
[data-theme="light"] .cpill.dur.shortrun   { background: rgba(54,98,160,0.09); border-color: rgba(54,98,160,0.22); color: #355F99; }
[data-theme="light"] .cpill.dur.exhibition { background: rgba(54,98,160,0.12); border-color: rgba(54,98,160,0.30); color: #2E5285; }
[data-theme="light"] .cpill.dur.permanent  { background: rgba(54,98,160,0.15); border-color: rgba(54,98,160,0.38); color: #274672; }
[data-theme="light"] .cpill.dur.recurring  { background: rgba(107,79,190,0.08); border-color: rgba(107,79,190,0.22); color: #6B4FBE; }
[data-theme="light"] .cpill.notime { background: rgba(192,122,32,0.05); border-color: rgba(192,122,32,0.22); color: var(--amber); }

.score-reason {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text3);
  line-height: 1.5;
  padding: 6px 8px;
  background: var(--bg5, var(--bg4));
  border-radius: 6px;
  border-left: 2px solid var(--border2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card system-meta line: reviewer + ID. Replaces score_reason on cards. */
.card-sysmeta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text3);
  line-height: 1.5;
  padding: 5px 8px;
  background: rgba(138, 104, 220, 0.06);
  border-radius: 6px;
  border-left: 2px solid rgba(138, 104, 220, 0.4);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.card-sysmeta .csm-by { color: var(--text2, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sysmeta .csm-id { color: var(--text3); cursor: pointer; flex-shrink: 0; position: relative; }
.card-sysmeta .csm-id:hover { color: var(--accent); }

/* Fast CSS-based copy tooltip (replaces slow browser-native title) */
.copy-id-btn { position: relative; cursor: pointer; display: inline-flex; align-items: center; }
.copy-id-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #f8f8f8;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 400;
  padding: 2px 6px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s;
  z-index: 10000;
}
.copy-id-btn:hover::after { opacity: 1; }

/* Modal: highlight rows that are derived/system-managed (Status, Reviewed by, Score, ID) */
.modal-info-item.system-row {
  background: rgba(138, 104, 220, 0.08);
  border-left: 2px solid rgba(138, 104, 220, 0.5);
  padding: 4px 8px;
  border-radius: 4px;
}
.modal-info-item.system-row .modal-info-label { color: #B094EC; }

/* Card footer buttons */
.card-footer {
  margin-top: auto;
  display: flex;
  gap: 6px;
}
.cf-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--bg4);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text2);
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-btn:hover { border-color: var(--border3); color: var(--text); background: var(--bg5, var(--bg4)); }
.cf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.cf-btn.publish { background: rgba(90,142,216,0.1); border-color: rgba(90,142,216,0.25); color: var(--blue); }
.cf-btn.publish:hover { background: rgba(90,142,216,0.2); }
.cf-btn.approve { background: rgba(61,187,124,0.1); border-color: rgba(61,187,124,0.25); color: var(--green); }
.cf-btn.approve:hover { background: rgba(61,187,124,0.2); }
.cf-btn.reject  { background: rgba(212,85,85,0.08); border-color: rgba(212,85,85,0.2); color: var(--red); }
.cf-btn.reject:hover  { background: rgba(212,85,85,0.18); }
/* State pills — solid-coloured, fully filled chips that read at a glance.
   These are non-interactive (status indicators rendered as buttons for
   layout consistency); cursor + hover are neutralised. */
.cf-btn.approved-state,
.cf-btn.published-state,
.cf-btn.rejected-state,
.cf-btn.staged-state {
  cursor: default;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 11px;
  padding: 4px 10px;
  color: #fff;
  border-width: 0;
}
.cf-btn.approved-state          { background: var(--green); }
.cf-btn.published-state         { background: var(--blue); }
.cf-btn.rejected-state          { background: var(--red); opacity: 0.85; }
.cf-btn.staged-state            { background: #a07cd6; }
.cf-btn.approved-state:hover,
.cf-btn.published-state:hover,
.cf-btn.rejected-state:hover,
.cf-btn.staged-state:hover      { filter: none; transform: none; }
.cf-btn.stage           { background: rgba(160,124,214,0.10); border-color: rgba(160,124,214,0.25); color: #a07cd6; }
.cf-btn.stage:hover     { background: rgba(160,124,214,0.20); }
.cf-btn.pending { background: rgba(224,153,64,0.08); border-color: rgba(224,153,64,0.2); color: var(--amber); }
.cf-btn.pending:hover { background: rgba(224,153,64,0.18); }
/* Icon-only buttons — square, no flex-grow so they don't steal width
   from the label-bearing chips. Used for Dismiss across all states. */
.cf-btn.icon-only {
  flex: 0 0 auto;
  padding: 4px 8px;
  min-width: 30px;
  justify-content: center;
}
.cf-btn.icon-only svg { margin: 0; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* lives in the right slot of .results-bar */
  gap: 10px;
  margin: 0;
}
/* Pagination — quiet ghost buttons with gold-on-hover. We had a heavy gold
   gradient before; it competed with the rest of the page and the disabled
   fallback was almost invisible. This treatment reads as a real button at
   rest, lights up on hover, and stays readable when disabled. */
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--bg3);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.012em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}
.page-btn svg { display: block; opacity: 0.85; }
.page-btn:hover:not(:disabled) {
  background: rgba(200,146,74,0.12);
  border-color: rgba(200,146,74,0.45);
  color: var(--gold-lt);
}
.page-btn:hover:not(:disabled) svg { opacity: 1; }
.page-btn:active:not(:disabled) { transform: translateY(1px); }
.page-btn:disabled {
  cursor: not-allowed;
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text2);
  opacity: 0.7;             /* readable, clearly inactive */
}
.page-btn:disabled svg { opacity: 0.55; }
.page-info {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text2);
  padding: 0 4px;
  letter-spacing: 0.012em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-info b {
  color: var(--gold-lt);
  font-weight: 700;
  margin: 0 3px;
}

/* ── Event Detail Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-content {
  background: var(--bg3);
  border: 1px solid rgba(200,146,74,0.15);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  width: 100%;
  max-width: 960px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 24px;
}

/* Create-event modal — wraps an iframe of /add-event so the analyst keeps
   the dashboard mounted underneath while drafting a new event. */
.create-event-content {
  padding: 0;
  width: 100%;
  max-width: 1100px;
  height: 92vh;
  max-height: 92vh;
  overflow: hidden;
  position: relative;
}
.create-event-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.create-event-close {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-event-close:hover { color: var(--text); border-color: var(--gold, #c8924a); }
.modal-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
}
.modal-left { }
.modal-right { }
.modal-card-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.modal-card-section .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.modal-card-section .card-preview {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
}
.modal-image-url-toggle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 0;
  margin-top: 4px;
}
.modal-image-url-toggle:hover { color: var(--text2); }
/* Weekly-schedule day chips in the event modal */
.sched-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.sched-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s, border-color .12s;
}
.sched-chip:hover { border-color: var(--accent); color: var(--text); }
.sched-chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1205;
}
.sched-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sched-cancel-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
}
.sched-cancel-btn:hover { color: var(--text); border-color: var(--text3); }
.sched-recur-warn {
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text);
  background: rgba(246, 195, 67, 0.10);
  border: 1px solid rgba(246, 195, 67, 0.40);
  border-radius: 6px;
}
.image-library {
  margin-top: 8px;
  max-height: 150px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  background: var(--bg3);
}
.image-library img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}
.image-library img:hover { border-color: var(--accent); }
.lib-hidden { display: none !important; }
.upload-area {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  align-items: center;
}
.upload-btn {
  padding: 5px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
}
.upload-btn:hover { color: var(--text); border-color: var(--border2); }
.modal-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 12px;
}
.modal-info-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.modal-info-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.modal-info-value {
  color: var(--text);
  font-size: 12px;
}
.modal-info-value a { color: var(--accent); text-decoration: none; }
.modal-info-value a:hover { text-decoration: underline; }
.modal-close {
  float: right;
  background: none;
  border: none;
  color: var(--text3);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--text); }

/* Edit lock banner — shown when another user is actively editing */
.edit-lock-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: rgba(224,153,64,0.14);
  border: 1px solid rgba(224,153,64,0.35);
  color: var(--amber);
  font-size: 13px;
}
.edit-lock-banner b { color: var(--text); font-weight: 700; }
.locked-by-other .modal-input,
.locked-by-other .modal-title-input,
.locked-by-other .modal-desc-input,
.locked-by-other .modal-select,
.locked-by-other .upload-btn,
.locked-by-other .modal-btn.save,
.locked-by-other .modal-btn.publish,
.locked-by-other .modal-btn.reject,
.locked-by-other .modal-btn.approve,
.locked-by-other .modal-btn.pending,
.locked-by-other .action-btn:not(.cancel):not([onclick*="requestCloseModal"]):not([onclick*="closeModal"]) {
  pointer-events: none;
  opacity: 0.5;
}
.locked-by-other .modal-input,
.locked-by-other .modal-title-input,
.locked-by-other .modal-desc-input,
.locked-by-other .modal-select { background: var(--bg2); }
.locked-by-other #generateCardBtn { pointer-events: none; opacity: 0.5; }
.modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-right: 30px;
}
.modal-image {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}
.modal-image-placeholder {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: var(--bg3);
  border-radius: 10px;
  margin-bottom: 14px;
}
.modal-field {
  margin-bottom: 12px;
}
.modal-field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.modal-field-hint {
  margin-top: 5px;
  font-size: 11px;
  color: var(--warn, #d99a4a);
  line-height: 1.4;
}
.modal-field-value {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.modal-field-value a { color: var(--accent); text-decoration: none; }
.modal-field-value a:hover { text-decoration: underline; }
.modal-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  outline: none;
}
.modal-input:focus { border-color: var(--accent); }
.modal-textarea {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  outline: none;
  resize: vertical;
  min-height: 60px;
}
.modal-textarea:focus { border-color: var(--accent); }
.modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.modal-btn {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.modal-btn.save { background: rgba(200,146,74,0.12); color: var(--gold-lt); border-color: rgba(200,146,74,0.3); }
.modal-btn.save:hover { background: rgba(200,146,74,0.2); }
.modal-btn.publish { background: rgba(90,142,216,0.12); color: var(--blue); border-color: rgba(90,142,216,0.3); }
.modal-btn.publish:hover { background: rgba(90,142,216,0.2); }
.modal-btn.stage { background: rgba(160,124,214,0.12); color: #a07cd6; border-color: rgba(160,124,214,0.3); }
.modal-btn.stage:hover { background: rgba(160,124,214,0.2); }

/* Two-step confirm: armed state for publish-style buttons. Solid filled blue
   replaces the muted variant so the morph is unmistakable; subtle ring
   reinforces "primed for second click." Auto-reverts after 3s or outside-click. */
.cf-btn.is-armed,
.modal-btn.is-armed {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(90,142,216,0.30);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.cf-btn.is-armed:hover,
.modal-btn.is-armed:hover { background: var(--blue); filter: brightness(1.05); }
.modal-btn.approve { background: rgba(61,214,140,0.12); color: var(--green); border-color: rgba(61,214,140,0.3); }
.modal-btn.approve:hover { background: rgba(61,214,140,0.2); }
.modal-btn.reject { background: rgba(255,90,90,0.08); color: var(--red); border-color: rgba(255,90,90,0.2); }
.modal-btn.reject:hover { background: rgba(255,90,90,0.12); }
.modal-btn.pending { background: rgba(224,153,64,0.08); color: var(--amber); border-color: rgba(224,153,64,0.2); }
.modal-btn.pending:hover { background: rgba(224,153,64,0.15); }
.modal-btn.cancel { background: var(--bg3); color: var(--text3); }
.modal-btn.cancel:hover { color: var(--text); }
.modal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

.modal-edit-section {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; margin-bottom: 4px;
}
.modal-shortcuts-hint {
  margin-top: 8px; font-size: 10px; color: var(--text3); text-align: center;
  letter-spacing: 0.3px;
}

/* Confirm popup */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.confirm-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 24px 28px; min-width: 300px; max-width: 400px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.confirm-title { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 6px; }
.confirm-msg { font-size: 12px; color: var(--text2); margin-bottom: 18px; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.confirm-btn {
  padding: 7px 18px; border-radius: 6px; border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; cursor: pointer; background: var(--bg3); color: var(--text2);
}
.confirm-btn:hover { background: var(--bg4); color: var(--text); }
.confirm-btn.confirm-yes { background: rgba(90,142,216,0.15); color: var(--blue); border-color: rgba(90,142,216,0.3); }
.confirm-btn.confirm-yes:hover { background: rgba(90,142,216,0.28); }
.confirm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Toast notification */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #fff;
  z-index: 1000;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* District selection indicator */
.district-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border);
  color: var(--text3);
}
.district-indicator.complete { border-color: rgba(61,214,140,0.3); color: var(--green); }

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES — hardcoded rgba values that don't
   use CSS variables need explicit light-mode versions.
══════════════════════════════════════════════════════════════ */

/* Cards */
[data-theme="light"] .event-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
[data-theme="light"] .event-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.06);
  background: var(--bg4);
}

/* Card hover overlay — white instead of dark */
/* Card select checkbox */
[data-theme="light"] .card-select {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.5);
}
[data-theme="light"] .card-select:hover { border-color: var(--gold); background: rgba(255,255,255,0.8); }

/* Status chips on image — white frosted glass */

/* Score overlay — white pill */
[data-theme="light"] .score-overlay {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: 6px;
}
[data-theme="light"] .score-number { font-size: 18px; }
[data-theme="light"] .score-max { color: var(--text3); }

/* Category gradients — softer muted pastel tones */
[data-theme="light"] .grad-music   { background: linear-gradient(160deg, #E8E0F0, #D4C8E6 50%, #C8BAD8); }
[data-theme="light"] .grad-art     { background: linear-gradient(160deg, #DBE6F0, #C4D4E8 50%, #B0C4DA); }
[data-theme="light"] .grad-food    { background: linear-gradient(160deg, #F0E6D8, #E6D4BC 50%, #DCC8A8); }
[data-theme="light"] .grad-sport   { background: linear-gradient(160deg, #D8EEE2, #BFE0CC 50%, #A8D4B8); }
[data-theme="light"] .grad-theatre { background: linear-gradient(160deg, #F0DEDE, #E6C8C8 50%, #D8B4B4); }
[data-theme="light"] .grad-family  { background: linear-gradient(160deg, #DEE6F2, #C8D4E8 50%, #B4C4DC); }
[data-theme="light"] .grad-film    { background: linear-gradient(160deg, #E4E0EC, #D0C8DE 50%, #BCB4D0); }
[data-theme="light"] .grad-festival { background: linear-gradient(160deg, #F0E8D4, #E6D8BC 50%, #DCC8A8); }
[data-theme="light"] .grad-heritage { background: linear-gradient(160deg, #EAE4D4, #DCD2BC 50%, #CEC4A8); }
[data-theme="light"] .grad-markets  { background: linear-gradient(160deg, #E4EAE0, #D0DCCA 50%, #BCD0B4); }
[data-theme="light"] .grad-community { background: linear-gradient(160deg, #E4E0EC, #D0C8DE 50%, #BCB4D0); }
[data-theme="light"] .grad-default  { background: linear-gradient(160deg, #EAEAE8, #DDDDD8 50%, #D0D0CC); }

/* Cat icon on light gradients */
[data-theme="light"] .cat-icon { stroke: rgba(0,0,0,0.25) !important; }

/* Pill chips — slightly lower alpha */
[data-theme="light"] .cpill.cat  { background: rgba(176,125,58,0.08); border-color: rgba(176,125,58,0.18); color: var(--gold); }
[data-theme="light"] .cpill.free { background: rgba(26,138,82,0.06);  border-color: rgba(26,138,82,0.15);  color: var(--green); }
[data-theme="light"] .cpill.paid { background: rgba(192,122,32,0.06); border-color: rgba(192,122,32,0.12); color: var(--amber); }
[data-theme="light"] .cpill.fall { background: rgba(107,79,190,0.06); border-color: rgba(107,79,190,0.15); color: var(--purple); }

/* Footer buttons */
[data-theme="light"] .cf-btn { background: var(--bg); }
[data-theme="light"] .cf-btn:hover { background: var(--bg4); }
[data-theme="light"] .cf-btn.publish { background: rgba(58,114,181,0.06); border-color: rgba(58,114,181,0.2); }
[data-theme="light"] .cf-btn.publish:hover { background: rgba(58,114,181,0.14); }
[data-theme="light"] .cf-btn.approve { background: rgba(26,138,82,0.06); border-color: rgba(26,138,82,0.2); }
[data-theme="light"] .cf-btn.approve:hover { background: rgba(26,138,82,0.14); }
[data-theme="light"] .cf-btn.reject  { background: rgba(196,60,60,0.04); border-color: rgba(196,60,60,0.15); }
[data-theme="light"] .cf-btn.reject:hover  { background: rgba(196,60,60,0.12); }
/* Light-mode state pills — keep them solid (same colour ramp as dark). */
[data-theme="light"] .cf-btn.approved-state  { background: var(--green); color: #fff; }
[data-theme="light"] .cf-btn.published-state { background: var(--blue); color: #fff; }
[data-theme="light"] .cf-btn.rejected-state  { background: var(--red); color: #fff; opacity: 0.85; }
[data-theme="light"] .cf-btn.staged-state    { background: #a07cd6; color: #fff; }
[data-theme="light"] .cf-btn.pending { background: rgba(192,122,32,0.05); border-color: rgba(192,122,32,0.18); }
[data-theme="light"] .cf-btn.pending:hover { background: rgba(192,122,32,0.12); }

/* Bulk bar */
[data-theme="light"] .bulk-bar {
  background: var(--bg2);
  border-color: var(--border2);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

/* Modal */
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.4); }
[data-theme="light"] .modal-content {
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04);
  border-color: var(--border2);
}
[data-theme="light"] .modal-input,
[data-theme="light"] .modal-textarea {
  background: var(--bg);
}
[data-theme="light"] .modal-edit-section {
  background: var(--bg); border-color: var(--border);
}

/* Status tab count pills */
[data-theme="light"] .stab.pending.active  .stab-count { background: rgba(192,122,32,0.08);  border-color: rgba(192,122,32,0.2); }
[data-theme="light"] .stab.approved.active .stab-count { background: rgba(26,138,82,0.08);   border-color: rgba(26,138,82,0.2); }
[data-theme="light"] .stab.published.active .stab-count { background: rgba(58,114,181,0.08); border-color: rgba(58,114,181,0.2); }
[data-theme="light"] .stab.rejected.active .stab-count  { background: rgba(196,60,60,0.06);  border-color: rgba(196,60,60,0.15); }

/* Filter chip active */
[data-theme="light"] .fchip.active {
  background: rgba(176,125,58,0.08);
  border-color: rgba(176,125,58,0.3);
  color: var(--gold);
}
[data-theme="light"] .msel-trigger.has-selection {
  background: rgba(176,125,58,0.08);
  border-color: rgba(176,125,58,0.3);
  color: var(--gold);
}
[data-theme="light"] .msel-trigger .msel-count {
  background: rgba(176,125,58,0.12);
  color: var(--gold);
}
[data-theme="light"] .msel-dropdown {
  background: #fff;
  border-color: var(--border2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
[data-theme="light"] .msel-item:hover { background: var(--bg3); }
[data-theme="light"] .msel-item.checked .msel-check {
  background: var(--gold);
  border-color: var(--gold);
}

/* Modal buttons */
[data-theme="light"] .modal-btn.save    { background: rgba(176,125,58,0.08); border-color: rgba(176,125,58,0.25); }
[data-theme="light"] .modal-btn.save:hover    { background: rgba(176,125,58,0.15); }
[data-theme="light"] .modal-btn.publish { background: rgba(58,114,181,0.08);  border-color: rgba(58,114,181,0.2); }
[data-theme="light"] .modal-btn.publish:hover { background: rgba(58,114,181,0.15); }
[data-theme="light"] .modal-btn.approve { background: rgba(26,138,82,0.08);  border-color: rgba(26,138,82,0.2); }
[data-theme="light"] .modal-btn.approve:hover { background: rgba(26,138,82,0.15); }
[data-theme="light"] .modal-btn.reject  { background: rgba(196,60,60,0.05);  border-color: rgba(196,60,60,0.15); }
[data-theme="light"] .modal-btn.reject:hover  { background: rgba(196,60,60,0.1); }
[data-theme="light"] .modal-btn.pending { background: rgba(192,122,32,0.06); border-color: rgba(192,122,32,0.18); }
[data-theme="light"] .modal-btn.pending:hover { background: rgba(192,122,32,0.12); }

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }


/* ── Article modal additions ── */
.modal-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  max-height: 200px;
  background: var(--bg3);
}
.modal-no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  min-height: 160px;
  border-radius: 8px;
  background: var(--bg3);
}
.modal-source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  transition: all 0.15s;
}
.modal-source-link:hover { border-color: var(--gold); background: rgba(200,146,74,0.08); }

.modal-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-title-input {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.modal-title-input:focus { border-color: var(--gold); outline: none; }

.modal-desc-input, .modal-notes-input {
  font-size: 13px;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  resize: vertical;
}
.modal-desc-input:focus, .modal-notes-input:focus { border-color: var(--gold); outline: none; }

.modal-select,
select.modal-input {
  font-size: 12px;
  color: var(--text);
  background-color: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 28px 6px 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239e9aaa' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 10px;
}
.modal-select option,
select.modal-input option {
  background: var(--bg2, #1e1a28);
  color: var(--text, #e8e4f0);
  padding: 6px 10px;
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.info-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.info-value {
  font-size: 13px;
  color: var(--text);
}
.info-value.status-approved { color: var(--green); }
.info-value.status-published { color: var(--blue); }
.info-value.status-rejected { color: var(--red); }
.info-value.status-unreviewed { color: var(--amber); }

.modal-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.action-btn {
  padding: 7px 16px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--bg3);
  color: var(--text2);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.action-btn:hover { border-color: var(--border3); color: var(--text); }
.action-btn.save { background: var(--gold); color: #1A0E02; border-color: var(--gold); }
.action-btn.save:hover { background: var(--gold-lt); }
.action-btn.approve { color: var(--green); border-color: rgba(61,187,124,0.3); }
.action-btn.approve:hover { background: rgba(61,187,124,0.1); }
.action-btn.publish { color: var(--blue); border-color: rgba(90,142,216,0.3); }
.action-btn.publish:hover { background: rgba(90,142,216,0.1); }
.action-btn.reject { color: var(--red); border-color: rgba(212,85,85,0.3); }
.action-btn.reject:hover { background: rgba(212,85,85,0.1); }

/* ── Article read-first modal ── */
.article-read-header { display: flex; flex-direction: column; gap: 8px; }
.article-read-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.article-read-title { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.3; margin: 0; }
.article-read-title-translated { font-size: 14px; font-weight: 500; color: var(--text3); font-style: italic; line-height: 1.35; margin: 4px 0 0 0; }
.article-read-img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 8px; margin-top: 8px; }
.article-read-body { font-size: 14px; line-height: 1.75; color: var(--text2); max-height: 300px; overflow-y: auto; padding: 8px 0; }
.article-read-body p { margin: 0 0 10px; }
.article-read-body a { color: var(--gold); text-decoration: underline; }
.article-read-body img { max-width: 100%; border-radius: 6px; }

/* ═════════════════════════════════════════════
   SCHEDULE MODE (News daily scheduling)
═════════════════════════════════════════════ */

/* ── Review | Schedule segmented toggle ── */
.mode-toggle {
  display: inline-flex;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.mode-btn {
  padding: 5px 12px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.mode-btn:hover { color: var(--text2); }
.mode-btn.active {
  background: var(--gold);
  color: #1A0E02;
}
.mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Active-day label (replaces week nav in Schedule mode) ── */
.active-day-label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  margin-left: 4px;
}
.adl-caption {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.adl-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--gold-lt);
}

/* ── Date strip ── */
.date-strip-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ds-scroll {
  width: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--bg3);
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ds-scroll:hover { background: var(--bg4); color: var(--text); }
.date-strip {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
}
/* Only Monday cells are snap stops — scrolling always lands on the start of
   a week, so the leftmost visible cell is predictably a Monday. */
.ds-cell.week-start { scroll-snap-align: start; scroll-snap-stop: always; }
.date-strip::-webkit-scrollbar { height: 6px; }
.date-strip::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.ds-cell {
  flex: 0 0 112px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 8px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.ds-cell:hover {
  border-color: var(--border3);
  background: var(--bg3-hover, var(--bg3));
}
.ds-cell.today { border-color: rgba(200,146,74,0.4); }
.ds-cell.active {
  background: rgba(200,146,74,0.14);
  border-color: rgba(200,146,74,0.6);
  box-shadow: 0 0 0 1px rgba(200,146,74,0.3);
}
.ds-cell.active .ds-day { color: var(--gold-lt); }
.ds-cell-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ds-wd {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
}
.ds-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.ds-mo {
  font-size: 10px;
  color: var(--text3);
  margin-left: auto;
}
.ds-today-badge {
  font-size: 9px;
  padding: 1px 5px;
  background: rgba(200,146,74,0.2);
  color: var(--gold-lt);
  border-radius: 4px;
  margin-left: 4px;
  font-weight: 700;
  text-transform: uppercase;
}
.ds-cc {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--bg4);
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.ds-cc.full { color: var(--green); }
.ds-cc-label {
  font-weight: 700;
  font-size: 10px;
  min-width: 18px;
}
.ds-cc-count { flex: 1; text-align: right; font-size: 10px; }
.ds-cc-bar {
  width: 100%;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  position: relative;
  display: none;  /* Hide the bar — the count number is cleaner in this size */
}
.ds-cc-bar-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--gold);
  border-radius: 1px;
}

/* ── Scheduled pills on cards ── */
.sched-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 4px 0 0;
}
.sched-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: rgba(200,146,74,0.12);
  border: 1px solid rgba(200,146,74,0.3);
  color: var(--gold-lt);
  font-size: 10px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.12s;
}
.sched-pill:hover {
  background: rgba(212,85,85,0.15);
  border-color: rgba(212,85,85,0.4);
  color: var(--red);
}
/* Approver read-only variant: no hover hint at removal, no pointer, no
   red flash — the schedule is analyst-owned, approver just observes it. */
.sched-pill.sched-pill-readonly { cursor: default; }
.sched-pill.sched-pill-readonly:hover {
  background: rgba(200,146,74,0.12);
  border-color: rgba(200,146,74,0.3);
  color: var(--gold-lt);
}

/* ── Schedule-mode per-card footer buttons ── */
.cf-btn.sched-add {
  flex: 1;
  background: var(--gold);
  color: #1A0E02;
  border-color: var(--gold);
  font-weight: 700;
}
.cf-btn.sched-add:hover { background: var(--gold-lt); }
.cf-btn.sched-pinned {
  flex: 1;
  background: rgba(61,187,124,0.15);
  border-color: rgba(61,187,124,0.3);
  color: var(--green);
  font-weight: 700;
}
.cf-btn.sched-pinned:hover {
  background: rgba(212,85,85,0.12);
  border-color: rgba(212,85,85,0.3);
  color: var(--red);
}
.cf-btn.sched-more {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-weight: 700;
}

/* ── Multi-day scheduling popover ── */
.confirm-box {
  width: 380px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.confirm-title { font-size: 16px; font-weight: 700; color: var(--text1); }
.confirm-body { font-size: 13px; color: var(--text2); line-height: 1.5; }
.confirm-body b { color: var(--text1); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.confirm-actions .cf-btn { padding: 8px 14px; font-size: 13px; }
.confirm-kbd {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--border3);
  border-radius: 4px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--text3);
  background: var(--bg3);
}
.sched-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  max-height: 72vh;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  z-index: 1002;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.sp-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.sp-close:hover { color: var(--text); }
.sp-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
}
.sp-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sp-grid thead th {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text3);
  text-align: center;
  padding: 6px 4px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.sp-grid td {
  padding: 4px;
  border-bottom: 1px solid var(--border);
}
.sp-grid td.sp-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
}
.sp-grid tr.sp-today td { background: rgba(200,146,74,0.12); }
.sp-grid tr.sp-today td.sp-date { color: var(--accent); font-weight: 600; }
.sp-grid tr.sp-active td { background: rgba(212,175,55,0.18); box-shadow: inset 3px 0 0 var(--gold); }
.sp-grid tr.sp-active td.sp-date { color: var(--gold); font-weight: 700; }
.sp-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sp-cell input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}
.sp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.sp-hint { font-size: 11px; color: var(--text3); }
.sp-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text3); }
.sp-done {
  padding: 6px 14px;
  background: var(--gold);
  color: #1A0E02;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.sp-done:hover { background: var(--gold-lt); }

/* ── Lists feature (filter chip, popovers, note pill) ─────── */

.fchip.fchip-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fchip.fchip-list svg { opacity: 0.85; }
.fchip.fchip-list.is-active {
  background: rgba(200,146,74,0.12);
  border-color: rgba(200,146,74,0.3);
  color: var(--gold-lt);
}
/* Lists are an analyst/admin curation tool — approvers don't curate, so
   hide the filter chip for them. The bulk-bar "Add to list" button and
   card-hover bookmark are already role-gated in JS; nav rail and the
   /lists pages also show role-aware UI. */
[data-role="approver"] .fchip.fchip-list { display: none !important; }

.lists-popover {
  position: fixed;
  z-index: 10003;
  background: var(--bg2);
  border: 1px solid var(--border3);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
}

.lp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.lp-head-title { font-weight: 600; font-size: 13px; }
.lp-link {
  background: none; border: none; padding: 0;
  color: var(--gold-lt); cursor: pointer; font-size: 12px;
}
.lp-link:hover { color: var(--gold); text-decoration: underline; }

.lp-section-label {
  padding: 8px 14px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
}

.lp-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 2px 4px 6px;
}
.lp-row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text2);
}
.lp-row:hover { background: var(--bg3); color: var(--text); }
.lp-row.is-active { background: rgba(200,146,74,0.12); color: var(--gold-lt); }
.lp-row-vis { display: flex; align-items: center; opacity: 0.7; }
.lp-row-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-row-star { color: var(--gold); display: inline-flex; }
.lp-row-count {
  font-size: 11px;
  color: var(--text3);
  background: var(--bg3);
  border-radius: 10px;
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}
.lp-row-edit {
  background: none; border: none; padding: 4px;
  color: var(--text3); cursor: pointer; border-radius: 4px;
}
.lp-row-edit:hover { color: var(--text); background: var(--bg4); }

.lp-empty { padding: 14px; text-align: center; color: var(--text3); font-size: 12px; }

/* Open list picker (used by Add-to-list popover). Same row chrome as the
   filter dropdown but with a leading radio dot to show selection. */
.lp-list-pick { max-height: 200px; }
.lp-pick {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text2);
}
.lp-pick:hover { background: var(--bg3); color: var(--text); }
.lp-pick.is-selected { background: rgba(200,146,74,0.14); color: var(--gold-lt); }
.lp-pick-radio {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--text3);
  position: relative;
}
.lp-pick:hover .lp-pick-radio { border-color: var(--text2); }
.lp-pick.is-selected .lp-pick-radio {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: inset 0 0 0 2px var(--bg2);
}
.lp-row-shared {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── /lists page (dedicated management view) ────────────── */

.vertical-tabs {
  display: inline-flex;
  border: 1px solid var(--border2);
  border-radius: 8px;
  overflow: hidden;
}
.vt-btn {
  padding: 6px 14px;
  background: var(--bg3);
  border: none;
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.vt-btn:hover { color: var(--text); background: var(--bg4); }
.vt-btn.active {
  background: rgba(200,146,74,0.18);
  color: var(--gold-lt);
}
.vt-btn + .vt-btn { border-left: 1px solid var(--border2); }

.lists-page-content {
  padding: 24px 28px 60px;
  overflow-y: auto;
  height: calc(100vh - 48px);
  box-sizing: border-box;
}
.lists-section { margin-bottom: 32px; }
.lists-section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
  margin: 0 0 14px 2px;
  font-weight: 600;
}
.lists-empty {
  padding: 18px 20px;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  color: var(--text3);
  font-size: 13px;
}
.lists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.ll-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  min-height: 120px;
}
.ll-card:hover {
  border-color: var(--border3);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.ll-card-head {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
}
.ll-card-vis { display: inline-flex; color: var(--text3); }
.ll-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-card-star { color: var(--gold); display: inline-flex; }
.ll-card-edit {
  background: none;
  border: none;
  color: var(--text3);
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.ll-card:hover .ll-card-edit { opacity: 1; }
.ll-card-edit:hover { color: var(--text); background: var(--bg3); }
.ll-card-desc {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.ll-card-desc-empty { color: var(--text3); font-style: italic; }
.ll-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 2px;
}
.ll-card-count { font-weight: 500; }
.ll-card-owner {
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* ── /lists/:id detail page ──────────────────────────────── */

.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text2);
  text-decoration: none;
  font-size: 12px;
  margin-right: 8px;
}
.back-link:hover { color: var(--text); background: var(--bg3); }

.list-detail-content {
  padding: 20px 28px 80px;
  overflow-y: auto;
  height: calc(100vh - 48px);
  box-sizing: border-box;
}

/* Header strip */
.ldh {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.ldh-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.ldh-vis { color: var(--text3); display: inline-flex; }
.ldh-name { font-size: 18px; font-weight: 700; color: var(--text); }
.ldh-star { color: var(--gold); }
.ldh-vertical {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-lt);
  background: rgba(200,146,74,0.14);
  border-radius: 4px;
  padding: 2px 8px;
}
.ldh-vis-label, .ldh-owner {
  font-size: 12px;
  color: var(--text3);
}
.ldh-spacer { flex: 1; }
.ldh-count {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
}
.ldh-desc { margin-top: 8px; font-size: 13px; color: var(--text2); }
.ldh-desc-empty { color: var(--text3); font-style: italic; }

/* Item rows */
.li-grid { display: flex; flex-direction: column; gap: 6px; }

.li-row {
  display: grid;
  grid-template-columns: 28px 80px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.li-row:hover { border-color: var(--border3); }
.li-row.is-clickable { cursor: pointer; }
.li-row.is-clickable:hover { background: var(--bg3); border-color: var(--border3); }
.li-row.is-selected { background: rgba(200,146,74,0.07); border-color: rgba(200,146,74,0.35); }

.li-select, .li-select-spacer {
  width: 22px; height: 22px;
}
.li-select {
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1.5px solid var(--border3);
  background: var(--bg3);
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.li-select:hover { border-color: var(--gold); }
.li-select.is-selected {
  border-color: var(--gold);
  background: var(--gold);
  color: #1A0E02;
}

.li-thumb {
  width: 80px; height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
}
.li-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.li-thumb-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg4), var(--bg3));
  color: var(--text3);
  font-weight: 700;
  font-size: 18px;
}

.li-body { min-width: 0; }
.li-title-row { display: flex; align-items: center; gap: 8px; }
.li-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
}
.li-status-published  { background: var(--blue); }
.li-status-approved   { background: var(--green); }
.li-status-rejected   { background: var(--red); }
.li-status-unreviewed { background: var(--amber); }
.li-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.li-meta-row {
  margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--text3);
}
.li-meta-chip {
  font-size: 11px; color: var(--text2);
  background: var(--bg3);
  padding: 2px 8px; border-radius: 4px;
}
.li-note {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(200,146,74,0.10);
  border: 1px solid rgba(200,146,74,0.22);
  color: var(--gold-lt);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  max-width: 100%;
}
.li-note:hover { background: rgba(200,146,74,0.18); }
.li-note span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 600px;
}
.li-note.is-empty {
  background: transparent;
  border: 1px dashed var(--border2);
  color: var(--text3);
}
.li-note.is-empty:hover { color: var(--text2); border-color: var(--border3); background: var(--bg3); }

/* Attribution subtitle under the note pill: "edited by Alice · 2h ago" */
.li-note-attribution {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text3);
  letter-spacing: 0.02em;
}

.li-actions { display: flex; align-items: center; gap: 6px; }
.li-remove {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text3);
  width: 30px; height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.li-remove:hover {
  background: rgba(212,85,85,0.15);
  border-color: rgba(212,85,85,0.4);
  color: var(--red);
}

.lp-foot {
  border-top: 1px solid var(--border);
  padding: 6px;
}
.lp-foot-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none; border: none; border-radius: 6px;
  color: var(--text2); cursor: pointer; text-align: left;
  font-size: 13px;
}
.lp-foot-btn:hover { background: var(--bg3); color: var(--text); }

.lp-form { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.lp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin-top: 2px; }
.lp-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.lp-input:focus { outline: none; border-color: var(--border3); }
.lp-textarea { min-height: 70px; resize: vertical; }
.lp-radio-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text2); }
.lp-radio-row label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.lp-note { font-size: 12px; color: var(--text3); padding: 4px 0; }

/* Note editor: attribution banner + small append-hint text */
.lp-note-attribution {
  font-size: 11px;
  color: var(--text3);
  background: var(--bg3);
  border-radius: 4px;
  padding: 5px 8px;
  letter-spacing: 0.02em;
}
.lp-note-attribution.is-self { color: var(--text2); }
.lp-help {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  line-height: 1.3;
}

.lp-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  margin-top: 6px;
}
.lp-btn-primary, .lp-btn-secondary, .lp-btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
}
.lp-btn-primary { background: var(--gold); color: #1A0E02; }
.lp-btn-primary:hover { background: var(--gold-lt); }
.lp-btn-secondary { background: var(--bg3); color: var(--text2); border-color: var(--border2); }
.lp-btn-secondary:hover { color: var(--text); border-color: var(--border3); }
.lp-btn-danger { background: rgba(212,85,85,0.1); color: var(--red); border-color: rgba(212,85,85,0.3); margin-right: auto; }
.lp-btn-danger:hover { background: rgba(212,85,85,0.18); }

.bulk-bar .bulk-act.bulk-list {
  background: rgba(200,146,74,0.10);
  color: var(--gold-lt);
  border-color: rgba(200,146,74,0.25);
  display: inline-flex; align-items: center; gap: 6px;
}
.bulk-bar .bulk-act.bulk-list:hover { background: rgba(200,146,74,0.20); }

/* ── Per-card note pill ───────────────────────────────────── */
.card-note-pill {
  position: absolute;
  bottom: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 12px);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(4px);
}
.card-note-pill:hover { background: rgba(0,0,0,0.8); border-color: rgba(255,210,140,0.4); }
.card-note-pill.is-empty { background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.85); }
.card-note-pill .card-note-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.card-note-pill svg { flex-shrink: 0; opacity: 0.85; }