/* SEF Studio: per-surface rules.
 *
 * Ordered by surface family:
 *   1. Auth (login, logged_out)
 *   2. Tenant picker
 *   3. Tenant dashboard
 *   4. Onboarding wizard (overview + step pages)
 *   5. URL importer (form, preview, status)
 *   6. Approval queue (batch_review, draft cards)
 *   7. Posts: generate hub + sub-tabs
 *   8. Briefs: proposal list / new / detail
 */

/* ============================================================ AUTH === */

.auth-page {
  min-height: 60vh;
  display: grid;
  place-items: start center;
  padding-block: clamp(2rem, 6vh, 5rem);
}
.auth-canvas {
  width: 100%;
  max-width: 460px;
  padding-inline: var(--gutter);
}
.auth-display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1rem;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 1.75rem;
}
.auth-form .form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}
.auth-foot {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-rule);
}

/* ================================================ TENANT PICKER ===== */

.tenant-list {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
  display: grid;
  gap: 0.75rem;
}
@media (max-width: 600px) {
  /* Tighter vertical rhythm on mobile so the picker doesn't waste a
   * whole screen on the H1 + 'N available' before the first card. */
  .tenant-list { margin: 1rem 0; gap: 0.5rem; }
}
.tenant-list > li {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  transition: border-color var(--transition-fast);
}
.tenant-list > li:hover { border-color: var(--color-rule-strong); }
.tenant-list > li.muted {
  border-color: transparent;
  background: transparent;
  padding: 0.5rem 0;
}
.tenant-list a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 1rem 1.25rem;
  min-height: 44px;
  color: var(--color-text);
  text-decoration: none;
}
.tenant-list a:hover { color: var(--color-text); }

/* Mobile: stack the row so the role pill (which can be wide — 'PLATFORM
 * OWNER via SEF' is ~22 chars) sits below the name + slug instead of
 * getting pushed off the right edge. The 3-column grid collapses to two
 * rows: name + slug on the first row, role pill on the second.
 *
 * The picker is the first thing tenants see after login, so this matters
 * a lot for first-impression quality on phones. */
@media (max-width: 600px) {
  .tenant-list a {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "slug"
      "role";
    gap: 0.25rem;
    padding: 0.85rem 1rem;
  }
  .tenant-name { grid-area: name; }
  .tenant-slug { grid-area: slug; }
  .tenant-role { grid-area: role; justify-self: start; margin-top: 0.4rem; }
}
.tenant-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.tenant-slug {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--color-muted);
}
.tenant-role {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  background: var(--color-bg-tint);
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}
/* SEF-side row: same pill but a subtle outline shift + 'via SEF'
 * marker so a Studio Manager browsing 30 tenants can quickly tell
 * which are their own memberships vs platform-side access. */
.tenant-role.tenant-role-sef {
  background: transparent;
  border: 1px solid var(--color-oxblood);
  padding: calc(0.25rem - 1px) calc(0.6rem - 1px);
}
.tenant-role-marker {
  font-size: 0.78em;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--color-muted);
  text-transform: none;
}

/* ================================================== DASHBOARD ======= */

.dashboard-header {
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}
.dashboard-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.4rem;
}

/* Stat row (in queue / approved / posted / total). */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin: 0 0 2rem;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
a.stat-card:hover {
  border-color: var(--color-rule-strong);
  background: var(--color-bg-tint);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.stat-value {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0.2rem 0;
}
.stat-foot {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* =============================================== HOME DASHBOARD ====== */

.home-next-post {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-oxblood);
  border-radius: 2px;
  padding: var(--app-card-pad);
  margin-bottom: 1.25rem;
}
.home-next-post--empty {
  border-left-color: var(--color-rule-strong);
}
.home-next-post-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  display: block;
  margin-bottom: 0.5rem;
}
.home-next-post-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.home-next-post-body {
  margin: 0 0 0.75rem;
  line-height: 1.5;
  color: var(--color-text);
}

.stat-card--attention {
  border-color: var(--color-oxblood);
}
.stat-card--warn {
  border-color: var(--color-warn, #b86800);
}

.home-alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem var(--app-card-pad);
  border-radius: 2px;
  border: 1px solid;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.home-alert--warn {
  background: #fffbf0;
  border-color: #e8c060;
  color: #7a5000;
}
.home-alert-icon { font-size: 1rem; }

.home-section-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.75rem;
}

.home-week {
  margin-bottom: 1.75rem;
}
.home-week-dots {
  display: flex;
  gap: 0.5rem;
}
.home-week-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  text-decoration: none;
  color: var(--color-muted);
  padding: 0.5rem 0;
}
.home-week-dot-day {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.home-week-dot-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--color-rule-strong);
  background: transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.home-week-dot--filled .home-week-dot-marker {
  background: var(--color-oxblood);
  border-color: var(--color-oxblood);
}
.home-week-dot--today .home-week-dot-day {
  color: var(--color-oxblood);
  font-weight: 600;
}
.home-week-dot:hover .home-week-dot-marker {
  border-color: var(--color-oxblood);
}

.home-actions {
  margin-bottom: 1.75rem;
}
.home-actions-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.home-activity {
  margin-bottom: 2rem;
}
.home-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  overflow: hidden;
}
.home-activity-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem var(--app-card-pad);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-bg);
  font-size: 0.875rem;
}
.home-activity-row:last-child { border-bottom: none; }
.home-activity-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.home-activity-body {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ================================================= SETTINGS HUB ===== */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
  margin-bottom: 2rem;
}
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--app-card-pad);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--app-card-radius);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.settings-card:hover {
  border-color: var(--color-oxblood);
  background: var(--color-bg-tint);
}
.settings-card-title {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}
.settings-card-desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.settings-features {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.settings-feature-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--app-card-radius);
  overflow: hidden;
}
.settings-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--app-card-pad);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
}
.settings-feature-row:last-child { border-bottom: none; }
.settings-feature-row strong { display: block; font-size: 0.9rem; margin-bottom: 0.15rem; }
.settings-toggle {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  background: var(--color-bg-tint);
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.settings-toggle--on {
  background: var(--color-status-ok-bg);
  color: var(--color-status-ok-fg);
  border-color: var(--color-status-ok-fg);
}

/* ================================================== DASHBOARD ======= */

.dashboard-actions { margin-bottom: 2rem; }
.dashboard-actions h2 {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 0.85rem;
}
.dashboard-actions h2.muted { color: var(--color-muted); }

.action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
  max-width: 540px;
}
.action-list a {
  display: block;
  padding: 0.7rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.action-list a:hover {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}
.action-list a.cta {
  background: var(--color-oxblood);
  color: var(--color-bg);
  border-color: var(--color-oxblood);
  font-weight: 500;
}
.action-list a.cta:hover {
  background: var(--color-oxblood-hover);
  border-color: var(--color-oxblood-hover);
  color: var(--color-bg);
}

/* ==================================== ONBOARDING WIZARD ============= */

/* Overview checklist. Step number is a small mono badge in oxblood, not a
 * filled green circle. Done state stamps the number cream-on-oxblood.
 */
.wizard-checklist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.6rem;
}
.wizard-checklist > li {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.wizard-checklist > li:has(> a:hover) { border-color: var(--color-rule-strong); }
.wizard-checklist > li.done {
  border-color: var(--color-oxblood);
  background: linear-gradient(180deg, rgba(92, 31, 31, 0.04), transparent), var(--color-bg);
}
.wizard-checklist > li > a,
.wizard-checklist > li > .step-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1.2rem;
  color: var(--color-text);
  text-decoration: none;
}
.wizard-checklist .step-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-oxblood);
  background: transparent;
  border: 1px solid var(--color-oxblood);
  border-radius: 2px;
}
.wizard-checklist .done .step-num {
  background: var(--color-oxblood);
  color: var(--color-bg);
}
.wizard-checklist .step-body { display: flex; flex-direction: column; gap: 0.15rem; }
.wizard-checklist .step-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.wizard-checklist .step-sub {
  font-size: var(--type-small);
  color: var(--color-muted);
  line-height: 1.4;
}
.wizard-checklist .step-status {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: right;
}
.wizard-checklist .done .step-status { color: var(--color-oxblood); }

/* Step forms (shared with the brand kit, brief, sources, platforms pages). */
.wizard-form { max-width: 720px; }
.wizard-form .form-row { margin-bottom: 1.1rem; }
.wizard-form .form-row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
}
.wizard-form label { display: block; }
.wizard-form h2 {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 1.5rem 0 0.6rem;
}
.wizard-form .form-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-rule);
}

/* Source list (existing-sources / existing-connections sections). */
.source-list { margin: 1.25rem 0 1.75rem; }
.source-list h2 {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 0.65rem;
}
.source-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.source-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0.7rem 0.95rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  font-size: var(--type-small);
}

/* ==================================== URL IMPORTER ================== */

.import-form {
  max-width: 760px;
  margin-top: 1rem;
}
.import-form > p { margin: 0.85rem 0; }
.import-form fieldset { margin-bottom: 1.25rem; }

.preview-block {
  margin: 1.5rem 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: var(--color-bg);
}
.preview-block h2 {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 0.85rem;
}
.preview-block p { margin: 0 0 0.6rem; }
.preview-block p:last-child { margin: 0; }
.preview-block.warnings { border-left: 3px solid var(--color-status-warn-fg); }

.preview-confirm {
  display: contents;
}

.handle-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: var(--type-small);
}
.handle-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-rule-strong);
  padding: 0.5rem 0.7rem;
}
.handle-table tbody td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
}
.handle-table tbody tr:last-child td { border-bottom: 0; }
.handle-table tbody td label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
}
.handle-table em {
  color: var(--color-muted);
  font-style: italic;
}

.import-status {
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 1.25rem 1.4rem;
  background: var(--color-bg);
  margin: 1rem 0;
}
.import-status p { margin: 0 0 0.55rem; }
.import-status p:last-child { margin: 0; }
.import-status pre.error-detail,
.error-detail {
  font-size: var(--type-small);
  background: var(--color-status-fail-bg);
  color: var(--color-status-fail-fg);
  border: 1px solid var(--color-status-fail-fg);
  border-radius: 2px;
  padding: 0.7rem 1rem;
  margin: 0.5rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==================================== APPROVAL QUEUE ================ */

.queue-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.queue-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.queue-header .muted {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.queue-header .queue-actions {
  margin-left: auto;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

/* In-flight batch banner. Surfaces after Generate-page dispatch so the
   operator gets visible progress instead of an empty queue + a stale
   success toast. JS in batch_review.html updates the text as drafts
   arrive. */
.generating-banner {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--color-cream, #f4ecd8);
  border: 1px solid var(--color-rule);
  border-left: 4px solid var(--color-oxblood);
  border-radius: 3px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.generating-banner-text { flex: 1; }
.generating-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-rule);
  border-top-color: var(--color-oxblood);
  border-radius: 50%;
  animation: generatingSpin 0.9s linear infinite;
  flex: 0 0 auto;
}
@keyframes generatingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .generating-spinner { animation: none; border-top-color: var(--color-oxblood); }
}

/* Bulk-actions dropdown in the queue header. Native <details>/<summary>
   with a small popover panel anchored to the summary. Keeping this lean
   so the queue header doesn't sprout three loose action buttons. */
.bulk-menu { position: relative; }
.bulk-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.bulk-menu > summary::-webkit-details-marker { display: none; }
.bulk-menu-caret {
  display: inline-block;
  font-size: 0.75em;
  margin-left: 0.15rem;
  transform: translateY(-1px);
}
.bulk-menu[open] .bulk-menu-caret { transform: translateY(-1px) rotate(180deg); }
.bulk-menu-list {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 30;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.3rem;
}
.bulk-menu-item {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  min-height: 40px;
  cursor: pointer;
}
.bulk-menu-item:hover,
.bulk-menu-item:focus-visible {
  background: var(--color-bg-tint, rgba(0, 0, 0, 0.05));
  outline: none;
}
.bulk-menu-item--danger { color: var(--color-oxblood, #5c1f1f); }

.grid {
  display: grid;
  gap: 0.85rem;
  /* Each row sizes to its tallest card so wide cards (LinkedIn / Instagram)
     don't force adjacent X/Bluesky cards to stretch. */
  grid-auto-rows: min-content;
  align-items: start;
}
@media (min-width: 960px) {
  .grid { grid-template-columns: 1fr 1fr; }
  /* Long-body cards take the full row so the full text shows without scroll. */
  .grid .card--wide { grid-column: 1 / -1; }
  /* Day-group divider spans the full row width so day boundaries
     read clearly when cards are laid out in a two-column grid. */
  .grid .queue-day-divider { grid-column: 1 / -1; }
}

/* Day-group divider in the queue grid. A thin rule with a date label
   on the left and the per-day draft count on the right; sits flush
   with the cards above and below. */
.queue-day-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0 0.15rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--color-rule);
}
.queue-day-divider:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.queue-day-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.queue-day-count {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  color: var(--color-muted);
  margin-left: auto;
}

/* Draft card body form (textarea inside card).
 * `field-sizing: content` (Chromium 123+, Edge, Opera) auto-grows the box to
 * fit. For Firefox/Safari we fall back to a small JS autosize hook in
 * batch_review.html. Either way, the textarea expands until the whole post is
 * visible — no inner scrollbar. */
.body-form { margin-top: 0.25rem; }
.body-form textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.65rem 0.8rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  field-sizing: content;
  min-height: 6.5rem;
  resize: vertical;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.body-form textarea:focus {
  outline: none;
  border-color: var(--color-oxblood);
  box-shadow: 0 0 0 3px rgba(92, 31, 31, 0.12);
}
.body-form textarea[disabled] {
  background: var(--color-bg-tint);
  color: var(--color-muted);
}
.body-form button { margin-top: 0.5rem; }
/* Read-only body shown when a draft is no longer editable
 * (APPROVED / SCHEDULED / AWAITING_COSIGN / POSTED / etc).
 * Matches the textarea's visual frame so the card layout doesn't
 * jump between editable and locked states. */
.body-readonly {
  margin-top: 0.25rem;
  padding: 0.65rem 0.8rem;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.body-readonly .post-body {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.body-readonly-url {
  margin: 0.4rem 0 0;
  word-wrap: break-word;
}
.body-readonly .char-count { margin-bottom: 0; }
.char-count {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 0.4rem 0 0.2rem;
}

.flags {
  list-style: none;
  padding-left: 0;
  margin: 0.6rem 0;
  display: grid;
  gap: 0.25rem;
  font-size: var(--type-small);
  color: var(--color-status-warn-fg);
}
.flags li::before {
  content: "!";
  display: inline-block;
  width: 1.25em;
  margin-right: 0.4rem;
  color: var(--color-status-warn-fg);
  font-family: var(--font-mono);
  font-weight: 500;
}

.source {
  font-size: var(--type-small);
  color: var(--color-muted);
  margin: 0.6rem 0;
  border-top: 1px solid var(--color-rule);
  padding-top: 0.55rem;
}
.source a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
.source a:hover { color: var(--color-oxblood); }

.card-actions select {
  padding: 0.45rem 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
}

/* Calendar deep-link highlight (interlude PR #4).
   When /<slug>/queue/?focus=<pk> lands on the queue, the matching
   card briefly carries this class. Static outline + a 2s pulse so
   the operator's eye is drawn back to the chip they clicked on the
   calendar. The class is removed by JS after 2s. */
.card--focused {
  outline: 3px solid var(--color-oxblood);
  outline-offset: 4px;
  animation: card-focused-pulse 2s ease-out;
}
@keyframes card-focused-pulse {
  0%   { box-shadow: 0 0 0 6px rgba(92, 31, 31, 0.28); }
  100% { box-shadow: 0 0 0 0   rgba(92, 31, 31, 0);    }
}
@media (prefers-reduced-motion: reduce) {
  .card--focused { animation: none; }
}

/* ==================================== POSTS: GENERATE HUB =========== */

.generate-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--color-rule-strong);
  margin: 1.25rem 0 1.5rem;
}
.generate-tab {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.7rem 1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.generate-tab:hover { color: var(--color-text); }
.generate-tab.active {
  color: var(--color-oxblood);
  border-bottom-color: var(--color-oxblood);
}

.generate-panel { padding: 0.5rem 0; }
.generate-form {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Week tab needs the full page width — it's a multi-column table that
   collapses ugly at 760px. The form drops the max-width cap, and the
   parent container drops its max-width when the Week panel is the
   visible tab. Together: table fills viewport minus the gutter padding,
   without affecting the other (form-shaped) tabs. */
#week-form { max-width: none; }
main.container:has(#panel-week:not([hidden])) {
  max-width: none;
}
.generate-form h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.generate-form > p.muted { margin: 0 0 0.5rem; }
.generate-form button[type="submit"] {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.plan-platform-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.25rem;
}
.plan-platform-filter-label {
  margin-right: 0.25rem;
}
.plan-platform-chip {
  cursor: pointer;
  border: none;
  opacity: 0.35;
  transition: opacity var(--transition-fast);
}
.plan-platform-chip--active {
  opacity: 1;
}
.plan-platform-chip:hover {
  opacity: 0.85;
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: var(--type-small);
}
.plan-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-rule-strong);
  padding: 0.55rem 0.7rem;
}
.plan-table tbody td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}
.plan-table tbody tr:hover { background: var(--color-bg-tint); }

/* ---- Week tab: status strip + per-row flags (Phase 1.1) ---- */
/* Generate-week date picker sits above the status strip and is always
   visible regardless of plan state. */
.week-start-picker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.9rem;
}
.week-start-picker label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.week-start-picker input[type="date"] {
  font-family: inherit;
  font-size: 15px;
  min-height: 36px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
  border-radius: 4px;
}

.week-status {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.2rem;
  row-gap: 0.45rem;
  margin: 0.4rem 0 1.2rem;
  padding: 0.9rem 1rem;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  font-size: var(--type-small);
}
.week-status-row {
  display: contents;
}
.week-status dt {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  align-self: center;
}
.week-status dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  align-items: center;
}

.overlay-chip {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.cadence-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.cadence-ok    { color: var(--color-status-ok-fg);   font-weight: 600; }
.cadence-short { color: var(--color-status-warn-fg); font-weight: 600; }

/* Column sizing for the Week-tab plan table.
   Use semantic class selectors (never nth-child — column count changes
   break those). table-layout: auto lets the browser compute cell widths
   from content; we give min-width / max-width hints to keep narrow
   columns narrow and prevent the flags column blowing out the layout.
   Columns: pick | day | platform | kind | source | flags | actions
   Time-of-day is intentionally absent — it is set on the calendar
   surface, not at generation. */
.plan-table { table-layout: auto; }

/* pick (checkbox) — wider on desktop to also fit the drag handle. The
 * handle is hidden below 720px (no native HTML5 drag-and-drop on touch),
 * so the column collapses back to checkbox-only on phones. */
.plan-col-pick  { width: 3.4rem; min-width: 3.4rem; text-align: center; white-space: nowrap; }
@media (max-width: 720px) {
  .plan-col-pick { width: 2rem; min-width: 2rem; }
}

/* Drag handle. Desktop-only — touch drag would clash with the page's
 * vertical scroll and there's no mobile HTML5-drag analogue worth
 * shipping in v1. Cursor flip on grab/grabbing matches the queue card
 * drag affordance. */
.plan-drag-handle {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0 0.15rem;
  color: var(--color-muted);
  cursor: grab;
  user-select: none;
  vertical-align: middle;
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: -0.15em;
}
.plan-drag-handle:active { cursor: grabbing; }
@media (max-width: 720px), (pointer: coarse) {
  .plan-drag-handle { display: none; }
}

/* Dragging-row + drop-target visual feedback, mirroring the queue
 * card pattern so the affordance reads consistently. */
.plan-row.plan-row--dragging { opacity: 0.45; }
.plan-row.plan-row--drop-above td { box-shadow: inset 0 2px 0 0 var(--color-oxblood); }
.plan-row.plan-row--drop-below td { box-shadow: inset 0 -2px 0 0 var(--color-oxblood); }
.plan-row.plan-row--saving { opacity: 0.7; pointer-events: none; }
/* day */
.plan-col-day   { width: 6rem;  min-width: 6rem;  white-space: nowrap; }
/* platform badge */
.plan-col-platform { width: 6rem; min-width: 6rem; }
/* source / topic — takes the remaining slack. Kind rides as an inline
   .kind-tag prefix here (no dedicated column) so longer kinds like
   'advocacy_tool' don't push the table wide. */
.plan-col-source { min-width: 12rem; }
/* flags — capped so one long badge doesn't eat the table */
.plan-col-flags { width: 13rem; max-width: 13rem; }
/* campaign tag — narrow select column */
.plan-col-campaign { width: 11rem; min-width: 9rem; }
/* action buttons — 5 × 1.9rem + gaps */
.plan-col-actions { width: 10.5rem; min-width: 10.5rem; text-align: right; white-space: nowrap; }

/* Aliases kept for back-compat with other templates using the old names. */
.plan-table-flags { width: 13rem; max-width: 13rem; }
.plan-row-actions { width: 10.5rem; min-width: 10.5rem; text-align: right; white-space: nowrap; }

/* The Flags column td carries both .plan-col-flags AND .plan-flags. The
 * earlier `display: flex` on the td produced inconsistent vertical
 * alignment because flex on a `<td>` is fragile in some browsers and
 * the user-agent's `display: table-cell` keeps interacting with it.
 * Treat the td as a normal table cell (vertical-align: top inherits
 * from .plan-table tbody td above) and let the inline-block chips
 * flow naturally with margin-based spacing. */
.plan-flags  { line-height: 1.4; }
.plan-flags .flag { vertical-align: top; margin: 0 0.25rem 0.25rem 0; }
.plan-source-cell { line-height: 1.35; word-break: break-word; }

/* Inline kind tag inside the source cell. Replaces the old Kind column.
   Tight, one-line, lower contrast than the title so it reads as a
   prefix label rather than as competing content. The colour variants
   pick out the three semantic buckets so an operator scanning the
   column can clock the mix at a glance:
     --typed     typed evergreen content (concept / episode / tool / ...)
     --evergreen brief topic-seed fallback
     --news      RSS news (no content_kind)                                */
.kind-tag {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5rem;
  white-space: nowrap;
  border-radius: 2px;
  vertical-align: 1px;
}
.kind-tag--typed     { background: var(--color-bg-tint); color: var(--color-text);  border: 1px solid var(--color-rule-strong); }
.kind-tag--evergreen { background: var(--color-bg-tint); color: var(--color-muted); border: 1px dashed var(--color-rule); }
.kind-tag--news      { background: var(--color-bg);      color: var(--color-muted); border: 1px solid var(--color-rule); }
.row-action-btn {
  display: inline-block;
  width: 1.9rem;
  height: 1.9rem;
  margin-left: 0.15rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.6rem;
  text-align: center;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  cursor: pointer;
}
.row-action-btn:hover:not([disabled]) {
  background: var(--color-bg-tint);
  border-color: var(--color-rule-strong);
}
.row-action-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
/* In-flight regenerate spins JUST its ↻ glyph (wrapped in
 * .row-action-glyph) so the operator sees active "working" feedback
 * during the ~2s LLM round-trip. Spinning the whole button looked
 * silly — the box moves with the glyph and the title attribute
 * jitters; pinning the box steady while the arrow turns reads as
 * a normal "loading" affordance. ↻ already points clockwise, so the
 * 0 → 360deg rotation in htmx-spin matches the arrow's direction. */
.row-action-glyph {
  display: inline-block;
  transform-origin: 50% 50%;
}
form.htmx-request .row-action-btn--regenerate .row-action-glyph {
  animation: htmx-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  form.htmx-request .row-action-btn--regenerate .row-action-glyph { animation: none; }
}
.row-action-reject { transition: color 0.1s, border-color 0.1s; }
.row-action-reject:hover {
  color: var(--color-status-fail-fg);
  border-color: var(--color-status-fail-fg);
}

/* Per-row campaign tag select. Mobile floor: 44px height, 16px font on
 * the input so iOS doesn't auto-zoom on focus (CLAUDE.md rule 7). The
 * tagged variant gets a coloured ring so operators can scan which slots
 * are linked to a campaign at a glance. */
.plan-campaign-form { margin: 0; }
.plan-campaign-select {
  min-height: 44px;
  font-size: 16px;
  width: 100%;
  padding: 0.25rem 0.4rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.plan-campaign-select--tagged {
  border-color: var(--color-rule-strong);
  background: var(--color-bg-tint);
  font-weight: 600;
}
.plan-campaign-select:focus-visible {
  outline: 2px solid var(--color-rule-strong);
  outline-offset: 2px;
}
@media (min-width: 721px) {
  /* Desktop: tighter target — touch floor only applies to phones. */
  .plan-campaign-select { min-height: 1.9rem; font-size: 0.875rem; }
}

/* Queue card: row-action toolbar above the approve/reject row.
   Mirrors the per-row controls on the Generate page Week tab so the
   operator can move / regenerate / swap / delete directly from the
   approval queue. */
.card-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--color-rule);
}

/* Phase 1.2: swap modal. */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal-card {
  background: var(--color-bg);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  width: min(640px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-rule);
}
.modal-header h3 { margin: 0; font-size: var(--type-body); }
.modal-close {
  background: none; border: none;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
}
.modal-body {
  padding: 1rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.modal-body section h4 {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.modal-list { list-style: none; padding: 0; margin: 0; max-height: 30vh; overflow-y: auto; }
.modal-list li { margin: 0; }
.modal-list li + li { border-top: 1px solid var(--color-rule); }
.modal-row-btn {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 0.15rem;
  font: inherit;
  color: inherit;
}
.modal-row-btn:hover { background: var(--color-bg-tint); }
.evergreen-swap-form {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.evergreen-swap-form label { display: flex; flex-direction: column; gap: 0.2rem; }
.evergreen-swap-form label > span {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.evergreen-swap-form button { align-self: flex-start; }

/* Calendar edit modal — opened by clicking a chip on /<slug>/calendar/.
   Reuses .modal-backdrop / .modal-card / .modal-header / .modal-body
   from the swap-modal block above; the rules here just lay out the
   form fields specific to the calendar edit case. */
.cal-modal { width: min(680px, 94vw); }
.cal-modal-body { gap: 1rem; }
.cal-modal-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.cal-modal-limit { margin-left: auto; }
.cal-modal-warn {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--color-status-warn-fg, #b88600);
  background: var(--color-status-warn-bg, #fff8e6);
  color: var(--color-status-warn-fg, #6b4d00);
  font-size: var(--type-small);
  border-radius: 2px;
}
.cal-modal-readonly .post-body {
  white-space: pre-wrap;
  margin: 0 0 0.5rem;
}
.cal-modal-form {
  display: flex; flex-direction: column; gap: 0.9rem;
}
.cal-modal-field {
  display: flex; flex-direction: column; gap: 0.3rem;
}
.cal-modal-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cal-modal-form textarea,
.cal-modal-form input[type="url"],
.cal-modal-form input[type="datetime-local"] {
  width: 100%;
  font: inherit;
  font-size: 16px; /* iOS no-zoom on focus, per CLAUDE.md rule 7 */
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  background: var(--color-bg);
  color: inherit;
  min-height: 44px; /* mobile touch floor, per CLAUDE.md rule 7 */
}
.cal-modal-form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.45;
}
.cal-modal-form textarea:focus-visible,
.cal-modal-form input:focus-visible {
  outline: 2px solid var(--color-oxblood, #6b1e1e);
  outline-offset: 2px;
}
.cal-modal-hint {
  align-self: flex-end;
}
.cal-modal-error {
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--color-error, #c0392b);
  background: var(--color-status-fail-bg, #fde7e7);
  color: var(--color-status-fail-fg, #7a1f1f);
  font-size: var(--type-small);
  border-radius: 2px;
}
.cal-modal-actions {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-rule);
}
.cal-modal-actions .btn { min-height: 44px; }

@media (max-width: 720px) {
  .cal-modal { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .modal-backdrop:has(> .cal-modal) { align-items: stretch; justify-content: stretch; }
  .cal-modal-actions { position: sticky; bottom: 0; background: var(--color-bg); }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop { transition: none; }
}

/* Hint that a chip is clickable for the modal. The chip already has
   cursor:pointer via the <a>; this keeps the hover signal subtle so
   it doesn't fight with the drag affordance. */
.cal-chip[hx-get]:hover { filter: brightness(1.05); }

.flag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flag-neutral { background: var(--color-bg-tint);        color: var(--color-muted);        border-color: var(--color-rule); }
.flag-info    { background: var(--color-status-info-bg); color: var(--color-status-info-fg); }
.flag-warn    { background: var(--color-status-warn-bg); color: var(--color-status-warn-fg); }
.flag-danger  { background: var(--color-status-fail-bg); color: var(--color-status-fail-fg); }

/* Slot whose pinned source would be hard-gated at draft time (archival
   news >= 90d, or event past the recap window). The picker filter
   excludes such items at pick time; this rule covers the residual case
   where a slot was pinned and then aged out, plus the migration window
   for plans built before the picker filter shipped. The status strip
   surfaces the count and an explicit "Refresh stale slots" button.
   Visual treatment is informational (muted + tinted left border), not
   strikethrough — the flag-danger badge does the loud signalling. */
.plan-row-skip td {
  color: var(--color-muted);
  background: var(--color-status-fail-bg);
}
.plan-row-skip td:first-child {
  border-left: 3px solid var(--color-status-fail-fg);
}
.plan-empty-state {
  padding: 1.5rem 1rem;
  border: 1px dashed var(--color-rule-strong);
  border-radius: 2px;
  margin: 1rem 0;
}
.plan-empty-state p { margin: 0 0 0.5rem; }
.plan-empty-state p:last-of-type { margin-bottom: 1rem; }

/* ==================================== CADENCE MATRIX (BRIEF) ======= */

.cadence-matrix-wrap {
  overflow-x: auto;
  margin: 0.4rem 0 0.6rem;
}
.cadence-matrix {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
}
.cadence-matrix th,
.cadence-matrix td {
  padding: 0.3rem 0.4rem;
  text-align: center;
  border: 1px solid var(--color-rule);
}
.cadence-matrix thead th {
  background: var(--color-bg-tint);
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.cadence-matrix-platform {
  text-align: left;
  background: var(--color-bg-tint);
  font-weight: 500;
}
.cadence-matrix-total {
  background: var(--color-bg-tint);
  font-weight: 700;
  min-width: 2.4rem;
}
.cadence-matrix-cell {
  width: 3.4rem;
  min-height: 36px;
  text-align: center;
  padding: 0.25rem 1.1rem 0.25rem 0.4rem;
  font: inherit;
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
}
.cadence-matrix-cell:focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 1px;
}
@media (pointer: coarse), (max-width: 720px) {
  .cadence-matrix-cell { min-height: 44px; font-size: 16px; }
}

/* ==================================== BRIEFS: PROPOSALS ============= */

.proposal-meta {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 1rem 1.2rem;
  margin: 1rem 0 1.5rem;
}
.proposal-meta p { margin: 0 0 0.5rem; }
.proposal-meta p:last-child { margin: 0; }

.proposal-actions {
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}
.proposal-actions h2 {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 0.75rem;
}
.proposal-actions form.inline { margin: 0 0 0.6rem; align-items: stretch; }
.proposal-actions form.inline:last-of-type { margin-bottom: 0.75rem; }

.diff-table { width: 100%; }
.diff-table tbody td:first-child {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--color-muted);
  width: 25%;
  white-space: nowrap;
}
.diff-table tbody td code {
  background: var(--color-bg-tint);
  padding: 0.1em 0.4em;
}
.diff-added,
.diff-removed {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  padding: 0.35rem 0.55rem;
  margin: 0.15rem 0;
  border-radius: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-added {
  background: var(--color-status-ok-bg);
  color: var(--color-status-ok-fg);
}
.diff-removed {
  background: var(--color-status-fail-bg);
  color: var(--color-status-fail-fg);
}
pre.diff-added,
pre.diff-removed { line-height: 1.45; max-height: 240px; overflow: auto; }


/* ============================================================ PROMO == */
/* Public homepage at "/". Marketing-density (looser than app surfaces),
 * mirrors the apex sef-marketing visual language: eyebrow + serif display
 * + oxblood foot rule + subhead + CTA, three-pillar row with vertical
 * hairlines, numbered capabilities, tinted Phase 0 status band.
 */

.promo-canvas {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.promo-hero {
  padding-block: clamp(3.5rem, 10vh, 6rem) clamp(2.5rem, 7vh, 4.5rem);
}
.promo-hero-canvas {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.promo-eyebrow {
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.promo-headline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(2.5rem, 7vh, 4rem);
  max-width: 22ch;
}
.promo-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  padding-top: 1.4rem;
  border-top: 2px solid var(--color-oxblood);
}
.promo-subhead {
  font-family: var(--font-serif);
  font-size: var(--type-lead);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
  max-width: 48ch;
}
.promo-cta {
  margin: 0;
  justify-self: end;
}
@media (max-width: 720px) {
  .promo-foot {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .promo-cta { justify-self: start; }
}

.promo-pillar {
  padding-block: clamp(3rem, 8vh, 5rem);
  border-block: 1px solid var(--color-rule);
}
.promo-pillar-eyebrow {
  text-align: center;
  display: block;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}
.promo-pillar-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  text-align: center;
}
.promo-pillar-item {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  padding: 0 clamp(0.5rem, 2vw, 1.5rem);
  position: relative;
}
.promo-pillar-item + .promo-pillar-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: var(--color-rule-strong);
}
.promo-pillar-coda {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--type-lead);
  color: var(--color-muted);
  text-align: center;
  margin: clamp(1.75rem, 4vh, 2.5rem) auto 0;
}
@media (max-width: 720px) {
  .promo-pillar-row { grid-template-columns: 1fr; gap: 1.25rem; }
  .promo-pillar-item + .promo-pillar-item::before { display: none; }
}

.promo-section {
  padding-block: clamp(3.5rem, 9vh, 5.5rem);
}
.promo-section-head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.promo-section-head h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0.6rem 0 0.9rem;
}
.promo-section-deck {
  color: var(--color-muted);
  margin: 0;
}

.promo-capabilities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 720px) {
  .promo-capabilities { grid-template-columns: 1fr; }
}
.promo-capability {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-rule);
}
.promo-capability-num {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-oxblood);
  padding-top: 0.4rem;
}
.promo-capability-body h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: 1.25;
  margin: 0 0 0.4rem;
}
.promo-capability-body p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.55;
}

.promo-status {
  background: var(--color-bg-tint);
  padding-block: clamp(3rem, 7vh, 4.5rem);
  border-top: 1px solid var(--color-rule);
}
.promo-section-tight {
  max-width: var(--container-max);
}
.promo-status-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 720px) {
  .promo-status-grid { grid-template-columns: 1fr; }
}
.promo-status-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
  padding-top: 0.3rem;
}
.promo-status-body p {
  margin: 0 0 0.9rem;
  color: var(--color-text);
  line-height: 1.6;
  max-width: 60ch;
}
.promo-status-body p:last-child { margin-bottom: 0; }
.promo-status-body a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.promo-status-body a:hover { color: var(--color-oxblood-hover); }


/* ===================================================== TEAM (B.1) ==== */

.page-header {
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}
.page-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

.team-section { margin-block: 2rem; }
.team-section-heading {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.team-count {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  background: var(--color-bg-tint);
  color: var(--color-text);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.1em;
}

.team-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.team-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.team-row-inactive { opacity: 0.55; }
.team-row-invite { border-style: dashed; }
.team-row-identity {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.team-row-name {
  font-weight: 500;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-row-email {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--color-muted);
}
.team-row-meta { white-space: nowrap; }

.team-role-pill {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
  white-space: nowrap;
}
.team-role-owner       { background: var(--color-oxblood); color: var(--color-bg); }
.team-role-manager     { background: var(--color-bg-tint); color: var(--color-oxblood); border: 1px solid var(--color-oxblood); }
.team-role-editor      { background: var(--color-bg-tint); color: var(--color-text); }
.team-role-contributor { background: var(--color-bg-tint); color: var(--color-muted); }
.team-role-viewer      { background: transparent; color: var(--color-muted); border: 1px solid var(--color-rule); }

.empty-state {
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--color-rule);
  border-radius: 2px;
  color: var(--color-muted);
}

/* Mobile: rows stack so the role pill doesn't crush the email column. */
@media (max-width: 600px) {
  .team-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "identity role"
      "meta meta";
    gap: 0.5rem 0.85rem;
  }
  .team-row-identity { grid-area: identity; }
  .team-role-pill   { grid-area: role; }
  .team-row-meta    { grid-area: meta; }
}

/* Team invite form (B.2) */
.team-invite-section {
  background: var(--color-bg-tint);
  padding: 1.25rem;
  border-radius: 2px;
  border: 1px solid var(--color-rule);
}
.team-invite-form {
  display: grid;
  grid-template-columns: 1fr 200px auto;
  gap: 0.85rem;
  align-items: end;
}
.team-invite-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.team-invite-field input,
.team-invite-field select {
  /* iOS Safari auto-zooms below 16px; keep explicit. */
  font-size: 16px;
  padding: 0.55rem 0.7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  font-family: inherit;
}
.team-invite-actions { display: flex; }
.team-invite-section .muted.small { margin-top: 0.6rem; }

@media (max-width: 600px) {
  .team-invite-form {
    grid-template-columns: 1fr;
  }
}

/* Team row inline actions (B.3) */
.team-row {
  /* Re-grid to accommodate optional role-picker + actions columns. */
  grid-template-columns: 1fr auto auto auto;
}
.team-row-rolepicker { margin: 0; }
.team-row-rolepicker select {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
}
.team-row-actions {
  display: inline-flex;
  gap: 0.85rem;
  white-space: nowrap;
}
.team-action-link {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.team-action-link:hover { color: var(--color-oxblood); }
.team-action-danger:hover { color: var(--color-error); }

@media (max-width: 600px) {
  .team-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "identity role"
      "meta meta"
      "actions actions";
  }
  .team-row-identity   { grid-area: identity; }
  .team-row-rolepicker { grid-area: role; }
  .team-role-pill      { grid-area: role; }
  .team-row-meta       { grid-area: meta; }
  .team-row-actions    { grid-area: actions; justify-content: flex-end; }
}

/* ====================================================== PLATFORMS (B.4) === */

.platform-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .platform-grid { grid-template-columns: 1fr; }
}
.platform-card {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.platform-card--status-connected { border-left: 3px solid var(--color-status-ok-fg); }
.platform-card--status-disconnected,
.platform-card--status-disabled,
.platform-card--status-no-credential {
  border-left: 3px solid var(--color-status-warn-fg);
}
.platform-card--status-unconnected {
  border-left: 3px dashed var(--color-rule-strong);
  background: var(--color-bg-tint);
}

.platform-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.platform-status {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.platform-status--connected     { color: var(--color-status-ok-fg); }
.platform-status--disconnected,
.platform-status--disabled,
.platform-status--no-credential { color: var(--color-status-warn-fg); }
.platform-status--unconnected   { color: var(--color-muted); }

.platform-card-body {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}
.platform-card-body dt {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.platform-card-body dd {
  margin: 0;
  font-size: 0.95rem;
}
.platform-card-foot {
  margin-top: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--color-rule);
}

@media (max-width: 600px) {
  .platform-card-body {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .platform-card-body dd { margin-bottom: 0.5rem; }
}

/* Platform actions panel (B.5) */
.platform-card-actions {
  margin-top: 0.5rem;
  border-top: 1px solid var(--color-rule);
  padding-top: 0.85rem;
}
.platform-card-actions > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 0.25rem 0;
}
.platform-card-actions > summary:hover { color: var(--color-oxblood); }
.platform-card-actions > summary::-webkit-details-marker { display: none; }
.platform-card-actions > summary::marker { content: ""; }

.platform-actions-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 0.85rem;
}
.platform-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: end;
}
.platform-form > .muted.small,
.platform-form > p {
  grid-column: 1 / -1;
  margin: 0;
}
.platform-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.platform-field input,
.platform-field select {
  font-size: 16px;
  padding: 0.5rem 0.65rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.platform-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
}
.platform-rotate { margin: 0; }
.platform-rotate > summary {
  cursor: pointer;
  padding: 0.4rem 0;
  list-style: none;
}
.platform-rotate > summary::-webkit-details-marker { display: none; }
.platform-rotate > summary::marker { content: ""; }
.platform-rotate[open] > summary { color: var(--color-oxblood); }
.platform-rotate .platform-form { margin-top: 0.5rem; }

@media (max-width: 600px) {
  .platform-form { grid-template-columns: 1fr; }
}

/* Sources page (B.6) */
.source-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: end;
}
.source-form .source-field-url { grid-column: 1 / -1; }
.source-form .source-field-checkbox {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.source-form input,
.source-form select {
  font-size: 16px;
  padding: 0.5rem 0.65rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.source-row .team-row-name a { color: inherit; text-decoration: none; }
.source-row .team-row-name a:hover { color: var(--color-oxblood); }
.source-test-sample {
  margin: 0.6rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
}
.source-aside { margin-top: 1.5rem; }

/* Source kind pills reuse the team role pill base styles */
.team-role-rss      { background: var(--color-bg-tint); color: var(--color-text); }
.team-role-json_api { background: var(--color-bg-tint); color: var(--color-oxblood); border: 1px solid var(--color-oxblood); }
.team-role-manual   { background: transparent; color: var(--color-muted); border: 1px solid var(--color-rule); }

@media (max-width: 600px) {
  .source-form { grid-template-columns: 1fr; }
}

/* ============================================================ BRIEF (C.1) === */

.brief-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--color-rule);
  margin: 0 0 1.75rem;
  padding-bottom: 0.6rem;
}
.brief-subnav-link {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.brief-subnav-link:hover { color: var(--color-oxblood); }
.brief-subnav-link--active {
  color: var(--color-oxblood);
  border-bottom-color: var(--color-oxblood);
}
.brief-subnav-count {
  background: var(--color-status-warn-bg);
  color: var(--color-status-warn-fg);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.78em;
  letter-spacing: 0.08em;
}

.brief-sections {
  display: grid;
  gap: 1.5rem;
}
.brief-section {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
}
.brief-section-head h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.2rem;
  letter-spacing: -0.01em;
}
.brief-section-head .muted {
  margin: 0 0 1rem;
}
.brief-section-body {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.25rem;
}
.brief-section-body dt {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-top: 0.15rem;
}
.brief-section-body dd { margin: 0; }
.brief-section-body p { margin: 0; }
.brief-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
}
.brief-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 1rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-small);
}
.brief-kv dt { color: var(--color-muted); text-transform: none; letter-spacing: 0; }
.brief-kv dd { color: var(--color-text); }
.brief-json {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-small);
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 0.6rem 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.brief-stance {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
}
.brief-stance--advocate { background: var(--color-status-ok-bg); color: var(--color-status-ok-fg); }
.brief-stance--differ   { background: var(--color-status-warn-bg); color: var(--color-status-warn-fg); }
.brief-stance--neutral  { background: var(--color-bg-tint); color: var(--color-muted); }

@media (max-width: 720px) {
  .brief-section-body { grid-template-columns: 1fr; gap: 0.2rem; }
  .brief-section-body dt { padding-top: 0.5rem; }
}

/* Brief per-section propose/edit links + form (C.2) */
.brief-section-titlerow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.brief-section-actions {
  display: inline-flex;
  gap: 1rem;
}
.brief-section-link {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
}
.brief-section-link:hover { color: var(--color-oxblood); }

.brief-section-form {
  display: grid;
  gap: 1.25rem;
  max-width: 720px;
}
.brief-form-field { display: grid; gap: 0.4rem; }
.brief-form-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
  margin-bottom: 0.3rem;
}
.brief-form-field input,
.brief-form-field select,
.brief-form-field textarea {
  font-size: 16px;
  padding: 0.55rem 0.7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  font-family: inherit;
}
.brief-form-field textarea { resize: vertical; }
.brief-form-json { font-family: var(--font-mono); font-size: 0.9rem; }

/* Campaign overlay form: keep key controls full-width so long guidance
   lines are editable without horizontal clipping / cramped input boxes. */
.overlay-form .overlay-input--full {
  width: 100%;
  box-sizing: border-box;
}
.overlay-form .overlay-style-overrides {
  width: 100%;
}
.overlay-form .overlay-style-overrides .brief-row {
  display: grid;
  grid-template-columns: auto 1fr 170px;
  gap: 0.55rem;
  align-items: start;
}
.overlay-form .overlay-style-overrides .brief-row > p {
  grid-column: 1 / -1;
  margin: 0;
}
@media (max-width: 720px) {
  .overlay-form .overlay-style-overrides .brief-row {
    grid-template-columns: 1fr;
  }
}

.brief-rows {
  display: grid;
  gap: 0.5rem;
}
.brief-row {
  display: grid;
  gap: 0.5rem;
}
.brief-rows-topics .brief-row { grid-template-columns: 1fr 90px; }
.brief-rows-positions .brief-row { grid-template-columns: 1fr 130px 1fr; }

@media (max-width: 600px) {
  .brief-rows-topics .brief-row,
  .brief-rows-positions .brief-row {
    grid-template-columns: 1fr;
  }
}

/* Onboarding wizard topic + position rows. Without an explicit width
   the browser sizes columns to placeholder content, clipping topic
   strings like "EU fiscal rules and exception...". */
.rows-table {
  width: 100%;
  border-collapse: collapse;
}
.rows-table th {
  text-align: left;
  font-weight: 500;
  padding: 0 0.5rem 0.25rem 0;
}
.rows-table td {
  padding: 0.15rem 0.5rem 0.15rem 0;
  vertical-align: middle;
}
.rows-table td:last-child,
.rows-table th:last-child { padding-right: 0; }
.rows-table input[type="text"],
.rows-table input[type="number"],
.rows-table select {
  width: 100%;
  box-sizing: border-box;
}

/* Owner direct-edit link (C.3) */
.brief-section-link--owner {
  color: var(--color-oxblood);
}

/* ====================================================== VERSION HISTORY (C.4) === */

.version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.version-row {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}
.version-row--current { border-left: 3px solid var(--color-oxblood); }
.version-row-identity { display: grid; gap: 0.25rem; }
.version-row-id {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
.version-row-link {
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.version-row-link:hover { color: var(--color-oxblood); }

.version-rollback-form { margin: 1rem 0 0; }

.version-diff { display: grid; gap: 1.25rem; }
.version-diff-section h3 {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.6rem;
}
.version-diff-row {
  border-left: 2px solid var(--color-rule);
  padding: 0.4rem 0.85rem;
  margin-bottom: 0.6rem;
}
.version-diff-row--list { border-left-color: var(--color-rule-strong); }
.version-diff-row--scalar { border-left-color: var(--color-oxblood); }
.version-diff-row--json { border-left-color: var(--color-muted); }

.version-diff-field {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
  margin-bottom: 0.4rem;
}
.version-diff-list {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.version-diff-list--removed li { color: var(--color-error); }
.version-diff-list--added   li { color: var(--color-status-ok-fg); }
.version-diff-side {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.95rem;
}
.version-diff-side--before { color: var(--color-muted); }
.version-diff-json {
  margin: 0.3rem 0;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Brief suggestions (C.5) */
.suggestion-row .suggestion-rationale summary {
  cursor: pointer;
  list-style: none;
}
.suggestion-row .suggestion-rationale summary::-webkit-details-marker { display: none; }
.suggestion-row .suggestion-rationale summary::marker { content: ""; }
.suggestion-row .suggestion-rationale[open] summary { color: var(--color-oxblood); }
.suggestion-row .suggestion-rationale p {
  margin: 0.5rem 0 0.4rem;
  font-size: 0.95rem;
}

/* Status pills for suggestions reuse the role-pill base */
.team-role-pending   { background: var(--color-status-warn-bg); color: var(--color-status-warn-fg); }
.team-role-accepted  { background: var(--color-status-ok-bg); color: var(--color-status-ok-fg); }
.team-role-dismissed { background: var(--color-bg-tint); color: var(--color-muted); }

/* ====================================================== QUEUE MOBILE (D.2) === */

/* Card swipe animation */
.card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.card.card--swiping { transition: none; }
.card.card--swiping-right {
  box-shadow: -4px 0 0 var(--color-status-ok-fg), 0 1px 4px rgba(0,0,0,0.06);
}
.card.card--swiping-left {
  box-shadow: 4px 0 0 var(--color-error), 0 1px 4px rgba(0,0,0,0.06);
}
.card.card--swiping-right::after,
.card.card--swiping-left::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.card { position: relative; }
.card.card--swiping-right::after {
  content: "Approve →";
  left: 1rem;
  color: var(--color-status-ok-fg);
}
.card.card--swiping-left::after {
  content: "← Reject";
  right: 1rem;
  color: var(--color-error);
}

/* Desktop drag-and-drop reorder (Phase D.4). Touch-only surfaces use
 * the swipe gestures + arrow buttons above; desktop layers drag-drop
 * on top of those for power users.
 *
 * IMPORTANT: only the tiny handle is draggable. Making the whole card
 * draggable steals caret placement / text-selection gestures from the
 * textarea in some browsers.
 */
.queue-drag-handle {
  display: none;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: -0.15em;
  user-select: none;
}
@media (min-width: 721px) and (pointer: fine) {
  .queue-drag-handle { display: inline-block; cursor: grab; }
  .queue-drag-handle:active { cursor: grabbing; }
}

.card.card--dragging { opacity: 0.55; }
.card.card--drop-target {
  outline: 2px dashed var(--color-oxblood);
  outline-offset: -2px;
}
.card.card--saving { opacity: 0.7; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .card.card--dragging { opacity: 0.7; }
}
@media (max-width: 720px), (pointer: coarse) {
  /* Mobile keeps the arrow buttons + swipe; HTML5 drag is desktop-only. */
  .card.card--dragging { opacity: 1; }
  .card.card--drop-target { outline: none; }
}

/* Sticky bulk-approve bar */
.queue-stickybar {
  display: none;  /* mobile-only; desktop uses the inline header button */
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0));
  z-index: 11;
  background: var(--color-bg);
  border-top: 1px solid var(--color-rule);
  padding: 0.6rem 1rem;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}
.queue-stickybar[data-visible="1"] { display: flex; }
.queue-stickybar-count {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-oxblood);
  min-width: 1.5em;
  text-align: center;
}
.queue-stickybar-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

@media (min-width: 721px) {
  /* Desktop: never show the sticky bar; the header button covers it. */
  .queue-stickybar { display: none !important; }
}

/* Reject reason bottom sheet (<dialog>) */
.reject-sheet {
  /* The browser default is a centred dialog; we anchor to the bottom on
     mobile and centre on desktop. */
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 480px;
  width: 100%;
  margin: auto;
}
.reject-sheet::backdrop { background: rgba(0, 0, 0, 0.4); }
.reject-sheet[open] { display: flex; flex-direction: column; }
.reject-sheet-inner {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  padding: 1rem 1.25rem 1.5rem;
  width: 100%;
}
.reject-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.reject-sheet-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1rem;
}
.reject-sheet-close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  color: var(--color-muted);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}
.reject-sheet-close:hover { color: var(--color-oxblood); }
.reject-sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.reject-sheet-reason {
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  min-height: 44px;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
}
.reject-sheet-reason:hover {
  background: var(--color-bg);
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}

/* Mobile: anchor the sheet to the bottom edge instead of centring. */
@media (max-width: 720px) {
  .reject-sheet {
    margin: auto auto 0;
    max-width: 100%;
  }
  .reject-sheet-inner {
    border-radius: 8px 8px 0 0;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
  }
  /* The card-reject-form's inline select is awkward on mobile; the
     swipe / sheet handles it. Hide the inline reason picker but keep
     the form (the JS submits it programmatically). */
  .card-reject-form select { display: none; }
}

/* ====================================================== QUICK-POST FAB (D.3) === */

.queue-fab {
  position: fixed;
  right: clamp(0.85rem, 3vw, 1.25rem);
  bottom: calc(72px + env(safe-area-inset-bottom, 0));
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  min-height: 52px;
  background: var(--color-oxblood);
  color: var(--color-bg);
  border: 0;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.queue-fab:hover { background: var(--color-oxblood-hover); }
.queue-fab:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Mobile: hide the label, show only the + icon — tighter footprint
 * above the bottom tab bar. */
@media (max-width: 720px) {
  .queue-fab { padding: 0; width: 56px; height: 56px; justify-content: center; }
  .queue-fab-label { display: none; }
  /* Sit above the sticky bulk bar AND the tab bar. */
  .queue-fab { bottom: calc(120px + env(safe-area-inset-bottom, 0)); }
  /* When sticky bar is hidden (data-visible='0'), come back down a bit. */
  body:has(.queue-stickybar[data-visible="0"]) .queue-fab {
    bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
}

/* ====================================================== GENERATE FAB (Week tab) === */

/* Sister of .queue-fab: a sticky lozenge on the Generate Week tab so the
 * "Generate selected" submit is always visible regardless of scroll
 * position. Submits the in-page #week-form via the HTML5 `form`
 * attribute (no JS-driven submit). Live count + disabled state are
 * managed by a small inline script in _week.html. */
.generate-fab {
  position: fixed;
  right: clamp(0.85rem, 3vw, 1.25rem);
  bottom: calc(72px + env(safe-area-inset-bottom, 0));
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  min-height: 52px;
  background: var(--color-oxblood);
  color: var(--color-bg);
  border: 0;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.generate-fab:hover { background: var(--color-oxblood-hover); }
.generate-fab:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}
.generate-fab[disabled] {
  background: var(--color-rule);
  color: var(--color-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.generate-fab-count { font-weight: 700; }

@media (max-width: 720px) {
  .generate-fab { padding: 0; width: 56px; height: 56px; justify-content: center; }
  .generate-fab-label { display: none; }
}
@media print { .generate-fab { display: none; } }

/* Quickpost sheet inherits .reject-sheet base styles; specialise content. */
.quickpost-form { display: flex; flex-direction: column; gap: 0.85rem; }
.quickpost-field { display: flex; flex-direction: column; gap: 0.25rem; }
.quickpost-field select,
.quickpost-field textarea {
  font-size: 16px;
  padding: 0.7rem 0.8rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  font-family: inherit;
  width: 100%;
}
.quickpost-field textarea {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  min-height: 7rem;
  resize: vertical;
}
.quickpost-hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.quickpost-hint .quickpost-over { color: var(--color-error); font-weight: 600; }
.quickpost-actions { justify-content: flex-end; }
.quickpost-actions .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================ CALENDAR (interlude) === */

/* Header strip (page title + tenant timezone). */
.cal-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cal-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.cal-header-sub {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}

/* Prev / Today / Next + Week / Month toggle. */
.cal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.85rem;
}
.cal-nav-spacer { flex: 1 1 auto; min-width: 0.5rem; }
.cal-nav-btn { min-width: 5rem; }
.cal-toggle--active {
  background: var(--color-oxblood);
  color: #fff;
  border-color: var(--color-oxblood);
}

/* Active-filter strip (echoes ?platform=, ?status=, ?overlay=). */
.cal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--type-small);
  margin-bottom: 0.85rem;
  padding: 0.5rem 0.7rem;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.cal-filters-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cal-filters-chip {
  background: #fff;
  border: 1px solid var(--color-rule-strong);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
}
.cal-filters-clear {
  margin-left: auto;
  font-size: var(--type-eyebrow);
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-muted);
}
.cal-filters-clear:hover { color: var(--color-oxblood); }

/* Unscheduled rail above the grid. Horizontal-scrolling row of chips. */
.cal-unscheduled {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-rule);
}
.cal-unscheduled-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.cal-unscheduled-head h2 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0;
}
.cal-unscheduled-count {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cal-unscheduled-rail {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.4rem;
}
.cal-unscheduled-rail .cal-chip { scroll-snap-align: start; flex: 0 0 auto; }

/* -------- Chips (shared by week / month / unscheduled rail) -------- */

.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
  border: 1px solid var(--color-rule-strong);
  background: #fff;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--type-small);
  line-height: 1.25;
  max-width: 100%;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cal-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.cal-chip:focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 2px;
}
.cal-chip-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  background: var(--color-bg-tint);
  color: var(--color-muted);
  flex: 0 0 auto;
}
.cal-chip-pill--bluesky   { background: #1185fe22; color: #0a4f99; }
.cal-chip-pill--x         { background: #00000010; color: #000; }
.cal-chip-pill--linkedin  { background: #0a66c222; color: #0a66c2; }
.cal-chip-pill--instagram { background: #e1306c22; color: #c13584; }
.cal-chip-time {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  color: var(--color-muted);
  flex: 0 0 auto;
}
.cal-chip-body {
  font-size: var(--type-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Status colour classes -- reuse existing tokens, no new palette. */
.cal-chip.chip--warn {
  background: var(--color-status-warn-bg);
  color: var(--color-status-warn-fg);
  border-color: var(--color-status-warn-fg);
}
.cal-chip.chip--oxblood {
  background: var(--color-oxblood);
  color: #fff;
  border-color: var(--color-oxblood);
}
.cal-chip.chip--oxblood .cal-chip-time,
.cal-chip.chip--oxblood .cal-chip-pill {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}
.cal-chip.chip--ok {
  background: var(--color-status-ok-bg);
  color: var(--color-status-ok-fg);
  border-color: var(--color-status-ok-fg);
}
.cal-chip.chip--fail {
  background: var(--color-status-fail-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}

/* -------- Week grid (desktop) -------- */

.cal-week {
  display: grid;
  grid-template-columns: 60px repeat(7, minmax(0, 1fr));
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: #fff;
  overflow: hidden;
}
.cal-week-head { display: contents; }
.cal-week-corner,
.cal-week-day-head {
  background: var(--color-bg-tint);
  border-bottom: 1px solid var(--color-rule);
  padding: 0.5rem 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  position: sticky;
  top: 0;
  z-index: 2;
}
.cal-week-day-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  border-left: 1px solid var(--color-rule);
}
.cal-week-day-head--today { color: var(--color-oxblood); }
.cal-week-day-name { font-weight: 600; }
.cal-week-day-num { color: var(--color-muted-soft); }
.cal-week-day-count {
  margin-left: auto;
  background: var(--color-oxblood);
  color: #fff;
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.7rem;
}
.cal-week-body { display: contents; }
.cal-week-hour-row { display: contents; }
.cal-week-hour-label {
  background: var(--color-bg-tint);
  border-top: 1px solid var(--color-rule);
  padding: 0.4rem 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  color: var(--color-muted);
}
.cal-week-cell {
  border-top: 1px solid var(--color-rule);
  border-left: 1px solid var(--color-rule);
  min-height: 56px;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
}
.cal-week-cell--today { background: rgba(92, 31, 31, 0.04); }

/* "Now" indicator: a thin oxblood line drawn inside today's hour cell at
 * render time, positioned vertically by minute-of-hour. The dot on the
 * left anchors the eye; the line itself spans the cell width. Pointer
 * events are disabled so the line never intercepts chip clicks. */
.cal-week-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-oxblood);
  pointer-events: none;
  z-index: 1;
}
.cal-week-now::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  background: var(--color-oxblood);
  border-radius: 50%;
}

.cal-empty {
  text-align: center;
  padding: 1.5rem;
  font-style: italic;
}

/* -------- Month grid (desktop) -------- */

.cal-month {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: #fff;
  overflow: hidden;
}
.cal-month-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-month-day-head {
  background: var(--color-bg-tint);
  border-bottom: 1px solid var(--color-rule);
  border-left: 1px solid var(--color-rule);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cal-month-day-head:first-child { border-left: 0; }
.cal-month-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, 1fr);
}
.cal-month-cell {
  border-top: 1px solid var(--color-rule);
  border-left: 1px solid var(--color-rule);
  padding: 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 96px;
}
.cal-month-cell--out {
  background: var(--color-bg-tint);
  color: var(--color-muted-soft);
}
.cal-month-cell--out .cal-month-cell-num { color: var(--color-muted-soft); }
.cal-month-cell--today { box-shadow: inset 0 0 0 2px var(--color-oxblood); }
.cal-month-cell-num {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  font-weight: 500;
  color: var(--color-muted);
}
.cal-month-cell--today .cal-month-cell-num { color: var(--color-oxblood); }
.cal-month-cell-chips {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.cal-month-cell-chips .cal-chip {
  font-size: var(--type-eyebrow);
  padding: 0.15rem 0.4rem;
}
.cal-month-cell-overflow {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cal-month-cell-overflow:hover { color: var(--color-oxblood); }

/* -------- Mobile (<=720px) -------- */

@media (max-width: 720px) {
  /* Week view: horizontal-scrolling strip; one column per day at a
     comfortable phone width. PR #6 will scrollIntoView the today
     column on load. */
  .cal-week {
    grid-template-columns: 56px repeat(7, 80vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .cal-week-day-head { scroll-snap-align: start; }
  .cal-week-corner,
  .cal-week-hour-label { position: sticky; left: 0; z-index: 3; }
  .cal-week-day-head { position: sticky; top: 0; z-index: 2; }

  /* Month view: chips compress to colour dots so 3+ posts in a day
     don't blow out the 7-column grid. PR #6 wires the +N more to a
     bottom sheet day-list. */
  .cal-month-body { grid-auto-rows: minmax(72px, 1fr); }
  .cal-month-cell { padding: 0.3rem 0.35rem; }
  .cal-month-cell-chips .cal-chip {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    padding: 0;
    overflow: hidden;
  }
  .cal-month-cell-chips .cal-chip-pill,
  .cal-month-cell-chips .cal-chip-time,
  .cal-month-cell-chips .cal-chip-body { display: none; }
  .cal-month-cell-chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .cal-nav-btn { min-width: 0; padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* Reduced motion: drop the chip hover lift. */
@media (prefers-reduced-motion: reduce) {
  .cal-chip { transition: none; }
  .cal-chip:hover { transform: none; box-shadow: none; }
}

/* -------- Drag-to-reschedule (PR #3, desktop week-view only) -------- */

.cal-chip--draggable { cursor: grab; }
.cal-chip--draggable:active { cursor: grabbing; }
.cal-chip--dragging { opacity: 0.55; }
.cal-chip--saving { opacity: 0.7; pointer-events: none; }

.cal-week-cell--drop-target {
  background: rgba(92, 31, 31, 0.08);
  outline: 2px dashed var(--color-oxblood);
  outline-offset: -2px;
}

/* Reschedule + general calendar toast (success / failure feedback). */
.cal-toast {
  position: fixed;
  left: 50%;
  bottom: 5rem;
  transform: translateX(-50%);
  padding: 0.6rem 1rem;
  border-radius: 2px;
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--type-small);
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 50;
  max-width: min(560px, 92vw);
  text-align: center;
}
.cal-toast[data-kind="ok"]   { background: var(--color-status-ok-fg); }
.cal-toast[data-kind="fail"] { background: var(--color-error); }

/* Mobile: drag is JS-disabled, so the grab cursor / drop styles are
   never visible. The toast still surfaces server-side errors if any
   (e.g. via a manual reschedule from a future bottom-sheet). */
@media (max-width: 720px) {
  .cal-chip--draggable { cursor: pointer; }
  .cal-toast { bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-chip--dragging { opacity: 1; }
  .cal-chip--saving { opacity: 1; }
}

/* -------- Cross-tenant calendar (PR #5) -------- */

/* Per-tenant chip colours. Chips on /sef/calendar/ are coloured by
   tenant rather than by status: the cross-tenant view's job is to
   surface clashes, so tenant identity dominates. Live tenants get
   bespoke palette entries; new tenants inherit the muted fallback
   (which is still readable, just less distinctive). Add a rule
   here when a new tenant onboards if you want a custom colour. */
.cal-chip.cal-tenant-mmtuk {
  background: var(--color-oxblood);
  color: #fff;
  border-color: var(--color-oxblood);
}
.cal-chip.cal-tenant-mmtuk .cal-chip-time,
.cal-chip.cal-tenant-mmtuk .cal-chip-pill {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}
.cal-chip.cal-tenant-mmtaction {
  background: var(--color-status-ok-fg);
  color: #fff;
  border-color: var(--color-status-ok-fg);
}
.cal-chip.cal-tenant-mmtaction .cal-chip-time,
.cal-chip.cal-tenant-mmtaction .cal-chip-pill {
  color: #fff;
  background: rgba(255, 255, 255, 0.20);
}
/* Fallback for any unknown tenant slug -- visible enough to render
   but distinctive in the legend so the operator notices. */
.cal-chip[class*=" cal-tenant-"]:not(.cal-tenant-mmtuk):not(.cal-tenant-mmtaction),
.cal-chip[class^="cal-tenant-"]:not(.cal-tenant-mmtuk):not(.cal-tenant-mmtaction) {
  background: var(--color-muted);
  color: #fff;
  border-color: var(--color-muted);
}

/* Tenant legend (clickable filter pills above the grid). */
.cal-tenants-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.85rem;
  padding: 0.5rem 0.7rem;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
.cal-tenants-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  opacity: 0.85;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.cal-tenants-pill:hover { opacity: 1; transform: translateY(-1px); }
.cal-tenants-pill--active {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
  opacity: 1;
}
.cal-tenants-pill.cal-tenant-mmtuk    { background: var(--color-oxblood); color: #fff; }
.cal-tenants-pill.cal-tenant-mmtaction { background: var(--color-status-ok-fg); color: #fff; }
.cal-tenants-pill[class*=" cal-tenant-"]:not(.cal-tenant-mmtuk):not(.cal-tenant-mmtaction),
.cal-tenants-pill[class^="cal-tenant-"]:not(.cal-tenant-mmtuk):not(.cal-tenant-mmtaction) {
  background: var(--color-muted);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .cal-tenants-pill { transition: none; }
  .cal-tenants-pill:hover { transform: none; }
}

/* -------- Mobile polish (PR #6) -------- */

/* Desktop month view: cap the visible chip count at 3 per cell. The
   server still renders all chips so the bottom-sheet JS can clone
   them; CSS just hides the overflow inline. The "+N more" link is
   what surfaces the rest. Mobile rules below override this back to
   "show all" because the chips are already compressed to dots there. */
@media (min-width: 721px) {
  .cal-month .cal-month-cell-chips .cal-chip:nth-child(n+4) {
    display: none;
  }
}

/* Day-sheet bottom sheet -- inherits .reject-sheet base from
   components.css; layout adjustments specific to the chip list. */
.cal-day-sheet .cal-day-sheet-inner {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cal-day-sheet .cal-day-sheet-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
}
.cal-day-sheet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 60vh;
  overflow-y: auto;
}
.cal-day-sheet-item {
  display: block;
}
.cal-day-sheet-item .cal-chip {
  display: flex;
  width: 100%;
  font-size: var(--type-small);
  padding: 0.45rem 0.7rem;
}
.cal-day-sheet-item .cal-chip-body {
  white-space: normal;
  text-overflow: clip;
}

/* Mobile: cells with chips become tap targets for the bottom sheet.
   The cursor hint matches the tap affordance and keyboard users
   still reach the chips via tab order (chips are <a>s). */
@media (max-width: 720px) {
  .cal-month-cell:has(.cal-chip) {
    cursor: pointer;
  }
  /* Mobile: don't hide the "extra" chips -- they're dots and we
     want every dot visible so the colour distribution reflects the
     day at a glance. */
  .cal-month .cal-month-cell-chips .cal-chip:nth-child(n+4) {
    display: inline-flex;
  }
}

/* =========================================================================
   Contacts list surface — tabbed table with filter chips and pagination.
   Used by Outreach's /<slug>/contacts/ surface; styles are namespaced
   under .contacts-* so they don't bleed into Studio surfaces.
   ========================================================================= */

.contacts-surface { padding: 1rem 0 4rem; }

.contacts-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.contacts-title { font-family: var(--font-display); font-size: 1.875rem; margin: 0 0 .25rem; }
.contacts-meta  { color: var(--color-muted); margin: 0; font-size: .9rem; }
.contacts-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.contacts-search {
  display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem;
  flex-wrap: wrap;
}
.contacts-search-input {
  flex: 1 1 18ch; min-width: 18ch; min-height: 44px; font-size: 16px;
  padding: .5rem .75rem; border: 1px solid var(--color-border);
  border-radius: 6px; background: var(--color-bg);
}
.contacts-search-clear {
  color: var(--color-muted); font-size: .9rem; padding: .4rem .6rem;
}

.contacts-tabs {
  display: flex; gap: .25rem; border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
.contacts-tab {
  padding: .65rem 1rem; color: var(--color-muted); text-decoration: none;
  border-bottom: 2px solid transparent; font-weight: 500;
  min-height: 44px; display: inline-flex; align-items: center; gap: .4rem;
}
.contacts-tab:hover { color: var(--color-text); }
.contacts-tab--active {
  color: var(--color-oxblood); border-bottom-color: var(--color-oxblood);
}
.contacts-tab-count {
  display: inline-block; padding: .05rem .45rem; font-size: .75rem;
  background: var(--color-bg-tint); color: var(--color-muted); border-radius: 99px;
}
.contacts-tab--active .contacts-tab-count {
  background: var(--color-oxblood); color: var(--color-cream);
}

.contacts-filters { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .75rem; }
.contacts-filter-row {
  display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
}
.contacts-filter-label {
  font-size: .8rem; color: var(--color-muted); text-transform: uppercase;
  letter-spacing: .04em; min-width: 5rem;
}

/* Reusable contact-chip vocabulary. Mirrors .cal-chip's token colour
   classes (chip--warn / --ok / --fail) but lives on a different base
   class so they don't accidentally inherit calendar-chip sizing. */
.contacts-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .8rem; font-weight: 500; padding: .15rem .5rem;
  border-radius: 99px; line-height: 1.4; white-space: nowrap;
}
.contacts-chip--warn   { background: var(--color-status-warn-bg); color: var(--color-status-warn-fg); }
.contacts-chip--ok     { background: var(--color-status-ok-bg);   color: var(--color-status-ok-fg); }
.contacts-chip--fail   { background: var(--color-status-fail-bg); color: var(--color-status-fail-fg); }
.contacts-chip--info   { background: var(--color-status-info-bg); color: var(--color-status-info-fg); }
.contacts-chip--muted  { background: var(--color-bg-tint);        color: var(--color-muted); }
.contacts-chip-empty   { color: var(--color-muted); opacity: .4; }

/* Tier pills use the same colour vocabulary as the chips above, but
   are narrower because they hold two characters. */
.contacts-chip-tier { font-variant-numeric: tabular-nums; padding: .15rem .4rem; min-width: 2.2rem; justify-content: center; }
.contacts-chip--t1 { background: var(--color-status-fail-bg); color: var(--color-status-fail-fg); }
.contacts-chip--t2 { background: var(--color-status-warn-bg); color: var(--color-status-warn-fg); }
.contacts-chip--t3 { background: var(--color-status-ok-bg);   color: var(--color-status-ok-fg); }
.contacts-chip--tx { background: var(--color-status-info-bg); color: var(--color-status-info-fg); }

/* Filter chips are clickable; on chips have a subtle ring. */
.contacts-chip-filter {
  text-decoration: none; border: 1px solid transparent;
  background: var(--color-bg-tint); color: var(--color-text);
  min-height: 32px;
}
.contacts-chip-filter:hover { border-color: var(--color-border); }
.contacts-chip-filter.contacts-chip--on {
  background: var(--color-oxblood); color: var(--color-cream);
}
.contacts-chip-count {
  font-size: .7rem; opacity: .75; font-variant-numeric: tabular-nums;
}

.contacts-listbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin: .75rem 0;
  font-size: .9rem; color: var(--color-muted);
}
.contacts-sort { display: flex; gap: .5rem; align-items: center; }
.contacts-sort-label { font-size: .8rem; }
.contacts-sort-select { min-height: 36px; font-size: 14px; padding: .25rem .5rem; }

.contacts-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 8px; }
.contacts-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.contacts-table th, .contacts-table td { padding: .7rem .85rem; text-align: left; vertical-align: middle; }
.contacts-table thead th {
  font-weight: 600; color: var(--color-muted); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--color-bg-tint); border-bottom: 1px solid var(--color-border);
}
.contacts-table tbody tr { border-top: 1px solid var(--color-border); }
.contacts-table tbody tr:first-child { border-top: none; }
.contacts-table tbody tr:hover { background: var(--color-bg-tint); }
.contacts-rowlink {
  color: var(--color-text); font-weight: 500; text-decoration: none;
}
.contacts-rowlink:hover { color: var(--color-oxblood); }
.contacts-row-sub { display: none; font-size: .8rem; color: var(--color-muted); margin-top: .15rem; }
.contacts-touch { font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: .85rem; }

.contacts-empty {
  padding: 2rem; text-align: center; color: var(--color-muted);
  background: var(--color-bg-tint); border-radius: 8px;
}

.contacts-pager {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1rem; gap: 1rem; flex-wrap: wrap;
}
.contacts-pager-link {
  padding: .5rem 1rem; text-decoration: none; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 6px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.contacts-pager-link:hover { background: var(--color-bg-tint); }
.contacts-pager-link--disabled { color: var(--color-muted); opacity: .4; pointer-events: none; }
.contacts-pager-current { color: var(--color-muted); font-size: .9rem; }

/* Mobile: drop the secondary columns, surface them under the row name. */
.show-narrow { display: none; }
@media (max-width: 720px) {
  .contacts-table .hide-narrow { display: none; }
  .contacts-table th, .contacts-table td { padding: .6rem .55rem; }
  .contacts-row-sub.show-narrow { display: block; }
  .contacts-filter-label { min-width: 4rem; }
  .contacts-head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Outreach detail-page shell — shared by Contacts org/person detail and
   Initiative detail. Provides a consistent head + stats + card + kv grid
   + timeline + form layout vocabulary so every detail surface reads the
   same way.

   Naming: .outreach-* (service-generic) not .contacts-* (which would lock
   it to one app). Chip pills already live under .contacts-chip-* in this
   file and are reused as-is — the prefix is historical, not semantic.
   ========================================================================= */

.outreach-page { padding: 1rem 0 4rem; }
.outreach-page-back {
  display: inline-block; margin-bottom: .75rem; color: var(--color-muted);
  font-size: .9rem; text-decoration: none;
}
.outreach-page-back:hover { color: var(--color-text); }

.outreach-page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.outreach-page-head-main { flex: 1 1 24ch; min-width: 0; }
.outreach-page-title {
  font-family: var(--font-display); font-size: 1.875rem; margin: 0 0 .25rem;
  word-wrap: break-word;
}
.outreach-page-subtitle { color: var(--color-muted); margin: 0; font-size: .95rem; }
.outreach-page-meta {
  display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0;
  align-items: center;
}
.outreach-page-actions {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  flex-shrink: 0;
}

.outreach-stats {
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin: 1rem 0 1.25rem;
}
.outreach-stat {
  background: var(--color-bg-tint); border-radius: 8px;
  padding: .75rem .9rem; border: 1px solid var(--color-border);
}
.outreach-stat-value {
  font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1.1; display: block;
}
.outreach-stat-label {
  font-size: .75rem; color: var(--color-muted); text-transform: uppercase;
  letter-spacing: .04em; margin-top: .15rem; display: block;
}

.outreach-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.outreach-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .75rem;
}
.outreach-card-title {
  font-family: var(--font-display); font-size: 1.05rem; margin: 0;
  letter-spacing: 0;
}
.outreach-card-eyebrow {
  font-size: .75rem; color: var(--color-muted); text-transform: uppercase;
  letter-spacing: .04em;
}
.outreach-card-empty {
  color: var(--color-muted); font-style: italic; padding: .5rem 0;
}

/* Two-column key/value grid for tenant-profile-shaped data. Replaces
   the bare <dl> pattern that didn't render legibly. */
.outreach-kv { display: grid; gap: .65rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0; }
.outreach-kv-row { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.outreach-kv-label {
  font-size: .72rem; color: var(--color-muted); text-transform: uppercase;
  letter-spacing: .04em;
}
.outreach-kv-value { font-size: .95rem; word-wrap: break-word; }
.outreach-kv-value-muted { color: var(--color-muted); }

.outreach-notes {
  margin-top: .75rem; padding: .75rem; background: var(--color-bg-tint);
  border-radius: 6px; border-left: 3px solid var(--color-border);
  font-size: .9rem;
}
.outreach-notes p:first-child { margin-top: 0; }
.outreach-notes p:last-child { margin-bottom: 0; }

/* Activity timeline — used for ContactEvent + similar log-shaped data. */
.outreach-timeline { list-style: none; padding: 0; margin: 0; }
.outreach-timeline-item {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem;
  padding: .55rem 0; border-top: 1px solid var(--color-border);
  font-size: .9rem;
}
.outreach-timeline-item:first-child { border-top: none; }
.outreach-timeline-when {
  color: var(--color-muted); font-variant-numeric: tabular-nums;
  font-size: .85rem;
}
.outreach-timeline-what { min-width: 0; }
.outreach-timeline-channel { font-weight: 500; }
.outreach-timeline-direction {
  font-size: .75rem; color: var(--color-muted); margin-left: .35rem;
}

/* Form layout that mirrors a sensible CRM form: labelled fields stack;
   short fields share a row at >=720px. Uses the studio button vocab. */
.outreach-form { display: grid; gap: 1rem; }
.outreach-form-row { display: flex; flex-direction: column; gap: .25rem; }
.outreach-form-row > label {
  font-weight: 500; font-size: .9rem;
}
.outreach-form-row > label > span.required { color: var(--color-error); margin-left: .15rem; }
.outreach-form-row > input[type="text"],
.outreach-form-row > input[type="email"],
.outreach-form-row > input[type="url"],
.outreach-form-row > input[type="tel"],
.outreach-form-row > input[type="number"],
.outreach-form-row > input[type="date"],
.outreach-form-row > input[type="search"],
.outreach-form-row > select,
.outreach-form-row > textarea {
  min-height: 44px; font-size: 16px; padding: .5rem .75rem;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-bg); width: 100%;
}
.outreach-form-row > textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; }
.outreach-form-help { color: var(--color-muted); font-size: .8rem; }
.outreach-form-error { color: var(--color-error); font-size: .85rem; }
.outreach-form-actions {
  display: flex; gap: .6rem; margin-top: .25rem; flex-wrap: wrap;
}
.outreach-form-banner {
  padding: .65rem .85rem; border-radius: 6px;
  background: var(--color-status-fail-bg); color: var(--color-status-fail-fg);
  font-size: .9rem;
}

/* Mini-table — used for People-at-org, Targets-on-initiative.
   Same chrome as .contacts-table but tighter. */
.outreach-mini-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.outreach-mini-table th, .outreach-mini-table td {
  padding: .55rem .65rem; text-align: left; vertical-align: middle;
}
.outreach-mini-table thead th {
  font-weight: 600; color: var(--color-muted); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--color-border);
}
.outreach-mini-table tbody tr { border-top: 1px solid var(--color-border); }
.outreach-mini-table tbody tr:hover { background: var(--color-bg-tint); }
.outreach-mini-table a { color: var(--color-text); font-weight: 500; text-decoration: none; }
.outreach-mini-table a:hover { color: var(--color-oxblood); }

@media (max-width: 720px) {
  .outreach-page-head { flex-direction: column; align-items: flex-start; }
  .outreach-page-actions { width: 100%; }
  .outreach-timeline-item { grid-template-columns: 1fr; gap: .15rem; }
  .outreach-timeline-when { font-size: .8rem; }
  .outreach-card { padding: .85rem .95rem; }
}

/* "Active / live" chip variant — used by Initiative status when the
   initiative is currently sending. Uses the brand oxblood the way the
   calendar chips do. */
.contacts-chip--live {
  background: var(--color-oxblood); color: var(--color-cream);
}

/* ----------------------------------------------------------------------
   Contacts bulk-add sticky action bar.
   Appears when the operator ticks one or more rows in the Contacts table.
   Sits above the mobile bottom-tab bar (which is fixed at bottom: 0)
   via a bottom offset that leaves the tab bar visible.
   ---------------------------------------------------------------------- */
.contacts-bulk-bar {
  position: sticky;
  bottom: 0;
  background: var(--color-bg, #fff);
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: .65rem .9rem;
  z-index: 20;
  display: none;
}
.contacts-bulk-bar--visible { display: block; }
.contacts-bulk-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  max-width: 60rem;
  margin: 0 auto;
}
.contacts-bulk-bar-summary {
  font-size: .9rem;
  margin-right: .35rem;
}
.contacts-bulk-bar-summary strong {
  font-weight: 700;
  color: var(--color-oxblood, #5c1f1f);
}
.contacts-bulk-bar-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  flex: 1 1 18rem;
  min-width: 0;
}

@media (max-width: 720px) {
  /* Lift the bar above the bottom-tab nav (approx 64px). */
  .contacts-bulk-bar { bottom: 64px; }
  .contacts-bulk-bar-inner { gap: .5rem; }
  .contacts-bulk-bar-picker { flex: 1 1 100%; }
}

/* Stateful next-step card on the Outreach home. The state token comes
   from the view so the card can lean colour cues in future without
   changing template logic — for now they share the same chrome. */
.outreach-card--next-step {
  border-left: 4px solid var(--color-oxblood, #5c1f1f);
}
.outreach-card--state-empty,
.outreach-card--state-contacts_no_initiative {
  border-left-color: var(--color-warn, #c98a1a);
}
.outreach-card--state-targets_no_drafts {
  border-left-color: var(--color-ok, #2a9d8f);
}


/* ==================================== REACTIVE SURFACES ============ */

.page-head {
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}
.page-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-head h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

.reactive-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.reactive-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.4rem;
}
.reactive-cards .card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.reactive-cards .card > .btn,
.reactive-cards .card > form {
  margin-top: auto;
}
@media (min-width: 960px) {
  .reactive-cards .card--span-2 { grid-column: span 2; }
}

.metric {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.2vw, 2.35rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}

.library-list,
.reactive-digest-list,
.draft-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.library-list > li,
.reactive-digest-list > li {
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
  background: var(--color-bg);
}
.library-list > li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.library-list > li > p,
.library-list > li > ol {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
}
.library-list > li > ol {
  padding-left: 1.2rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.4rem;
  font-size: var(--type-small);
}
.data-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-rule-strong);
  padding: 0.55rem 0.7rem;
}
.data-table tbody td {
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}
.data-table tbody tr:hover { background: var(--color-bg-tint); }

form.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  align-items: end;
  margin: 0.85rem 0 0;
}
form.form-row input,
form.form-row select,
form.form-row textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  padding: 0.5rem 0.65rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
}
form.form-row input:focus,
form.form-row select:focus,
form.form-row textarea:focus {
  outline: none;
  border-color: var(--color-oxblood);
  box-shadow: 0 0 0 3px rgba(92, 31, 31, 0.12);
}

form.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  align-items: end;
}
form.form-grid .span2 {
  grid-column: 1 / -1;
}
form.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
form.form-grid input,
form.form-grid select,
form.form-grid textarea {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  padding: 0.5rem 0.65rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
}
form.form-grid input:focus,
form.form-grid select:focus,
form.form-grid textarea:focus {
  outline: none;
  border-color: var(--color-oxblood);
  box-shadow: 0 0 0 3px rgba(92, 31, 31, 0.12);
}

.draft-card {
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: var(--color-bg);
  padding: 0.85rem 1rem;
}
.draft-card--focus {
  border-color: var(--color-oxblood);
  box-shadow: 0 0 0 3px rgba(92, 31, 31, 0.14);
}
.draft-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}
.draft-card-body p {
  margin: 0 0 0.6rem;
  word-break: break-word;
}
.draft-card-body p:last-child { margin-bottom: 0; }
.draft-card-foot {
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-rule);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.draft-card-foot form.inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.draft-card-foot input[type="text"] {
  min-width: min(320px, 68vw);
}

.reactive-queue {
  max-width: 900px;
}

.repost-settings {
  flex-basis: 100%;
}
.repost-settings > summary {
  width: fit-content;
}

@media (max-width: 720px) {
  .page-head--split {
    align-items: flex-start;
  }
  .draft-card-foot {
    align-items: stretch;
  }
  .draft-card-foot form.inline {
    display: flex;
    width: 100%;
  }
  .draft-card-foot input[type="text"] {
    min-width: 0;
    flex: 1;
  }
}

/* ================================================================== */
/* Post Room — notification preferences                                 */
/* ================================================================== */

.postroom-nominee-flags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.postroom-flag-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-height: 44px;
  justify-content: center;
  cursor: pointer;
}

.postroom-flag-abbr {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-oxblood);
}

.postroom-flag-off {
  opacity: 0.35;
}

.postroom-nominee-flags--readonly {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

/* On very narrow screens, stack the flags below the identity row */
@media (max-width: 420px) {
  .postroom-nominee-flags {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    padding-top: 0.25rem;
  }
}