/* Ponics Admin — minimal overrides on top of Pico CSS */

/* --- Top bar --- */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding: 0.5rem 1.5rem;
}

.top-bar nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.top-bar nav ul {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-bar a {
  text-decoration: none;
  color: inherit;
}

.top-bar .small {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
}

/* --- Breadcrumbs --- */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  margin-bottom: 15px;
  padding-top: 0.75rem;
}

.breadcrumbs a {
  color: var(--pico-primary);
}

.breadcrumbs .sep {
  margin: 0 0.35rem;
  color: var(--pico-muted-color);
}

/* --- Card grid --- */
.card-grid {
  display: grid;
  gap: 1.5rem;
}

.card-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .card-grid.cols-2,
  .card-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

.card-grid article {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Clickable card */
a.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

a.card-link article {
  height: 100%;
  cursor: pointer;
  background: var(--pico-primary-background);
  border-color: var(--pico-primary-border);
  color: var(--pico-primary-inverse);
  transition: background 0.15s, border-color 0.15s;
}

a.card-link article h3,
a.card-link article p {
  color: var(--pico-primary-inverse);
}

a.card-link:hover article {
  background: var(--pico-primary-hover-background);
  border-color: var(--pico-primary-hover-border);
}

/* Disabled / coming-soon card */
article.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Disabled / placeholder buttons --- */
button[disabled],
[role="button"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--pico-secondary-background);
  border-color: var(--pico-secondary-border);
  color: var(--pico-secondary-inverse);
  pointer-events: none;
}

/* --- Production warning --- */
.production-warning {
  background: #c0392b;
  color: white;
  text-align: center;
  padding: 0.5rem 1rem;
  font-weight: bold;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

/* --- Top-bar environment dropdown --- */
.env-nav-select {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  margin: 0;
  border-radius: var(--pico-border-radius);
  font-weight: 600;
  cursor: pointer;
  width: auto;
  min-width: 140px;
}

.env-nav-select.env-dev {
  background: #e8f5e9;
  border-color: #66bb6a;
  color: #2e7d32;
}

.env-nav-select.env-production {
  background: #fbe9e7;
  border-color: #ef5350;
  color: #c62828;
}

/* --- Service result layout (result left, form right) --- */
.service-layout {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 4rem;
  align-items: start;
}

.service-form {
  position: sticky;
  top: 5rem;
}

td.muted-cell, p.muted-cell {
  color: var(--pico-muted-color);
}

/* --- Compact content font size --- */
main.container {
  font-size: 0.875em;
}

/* Exception: navigation cards stay at full size */
a.card-link article {
  font-size: 1rem;
}

/* Exception: service-form environment labels */
.service-form > p {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .service-layout {
    grid-template-columns: 1fr;
  }
  .service-result { order: 2; }
  .service-form   { order: 1; position: static; }
}

/* --- Login --- */
.login-container {
  max-width: 400px;
  margin: 10vh auto;
}

/* --- Source document link (beside h2 on pull pages) --- */
h2 .source-link {
  font-size: 0.75rem;
  font-weight: normal;
  margin-left: 0.75rem;
  vertical-align: middle;
  color: var(--pico-muted-color);
}

h2 .source-link:hover {
  color: var(--pico-primary);
}

/* --- Status badges --- */
.status-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.status-active {
  background: #27ae60;
  color: #fff;
}

.status-exhausted {
  background: #f39c12;
  color: #fff;
}

.status-deactivated {
  background: #95a5a6;
  color: #fff;
}

.status-expired {
  background: #c0392b;
  color: #fff;
}

.status-applied {
  background: #27ae60;
  color: #fff;
}

.status-failed {
  background: #c0392b;
  color: #fff;
}

.status-rolled-back {
  background: #95a5a6;
  color: #fff;
}

.status-not-applied {
  background: #f39c12;
  color: #fff;
}

/* --- Notification operator hint banner (test trigger result drawer) --- */
.hint-banner {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  color: #664d03;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* --- Notification campaign status badges --- */
.status-draft {
  background: #95a5a6;
  color: #fff;
}

.status-scheduled {
  background: #3498db;
  color: #fff;
}

.status-sending {
  background: #f39c12;
  color: #fff;
}

.status-sent {
  background: #27ae60;
  color: #fff;
}

.status-cancelled {
  background: #c0392b;
  color: #fff;
}

/* --- Help icon button --- */
.help-icon {
  all: unset;
  cursor: pointer;
  float: right;
  line-height: 1;
  color: var(--pico-muted-color);
}

.help-icon:hover {
  color: var(--pico-primary);
}

.help-icon .material-symbols-outlined {
  font-size: 1.25rem;
  vertical-align: middle;
}

/* --- Selectable profile items --- */
.profile-item {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  transition: border-color 0.15s, background 0.15s;
}

.profile-item:hover {
  border-color: var(--pico-primary);
}

.profile-item.selected {
  border-color: var(--pico-primary);
  background: color-mix(in srgb, var(--pico-primary) 8%, transparent);
}

.profile-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.profile-item .profile-name {
  font-weight: 600;
}

.profile-item .profile-desc {
  color: var(--pico-muted-color);
  font-size: 0.85em;
}

.profile-summary {
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  min-height: 2.5rem;
}

.profile-summary .profile-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  margin: 0.1rem 0.2rem;
  border-radius: 1rem;
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
}

.profile-summary .seed-tag {
  background: #27ae60;
}

/* --- Confirmation box --- */
.confirmation-box {
  border: 2px solid #e67e22;
  background: #fef9e7;
}

.confirmation-box h4 {
  color: #e67e22;
  margin-bottom: 0.5rem;
}

/* --- Compatibility indicators (cross-environment, system sync) --- */
.compatibility-info {
  border: 2px solid #f39c12;
  background: #fef9e7;
}

.compatibility-blocked {
  border: 2px solid #c0392b;
  background: #fdedec;
}

/* --- Destructive button --- */
button.destructive {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

button.destructive:hover {
  background: #a93226;
  border-color: #a93226;
}

/* --- Small inline action buttons (table rows) --- */
.small-action {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  margin: 0;
}

/* --- Terminal output --- */
.terminal-output {
  background: #1a1a1a;
  color: #e0e0e0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 1rem;
  border-radius: var(--pico-border-radius);
  min-height: 8rem;
  max-height: 24rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

/* --- Log viewer --- */
.log-terminal {
  background: #1a1a1a;
  color: #e0e0e0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 1rem;
  border-radius: var(--pico-border-radius);
  min-height: 12rem;
  max-height: 70vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

.log-terminal .log-entry {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 0 2px 1.2em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.log-terminal .log-entry.collapsible {
  cursor: pointer;
  text-indent: -1.2em;
}

.log-terminal .log-entry.collapsible::before {
  content: "\203A";
  display: inline-block;
  color: #666;
  width: 1em;
  text-indent: 0;
  transition: transform 0.15s;
}

.log-terminal .log-entry.collapsible.expanded {
  white-space: pre-wrap;
  overflow: visible;
  word-break: break-all;
}

.log-terminal .log-entry.collapsible.expanded::before {
  transform: rotate(90deg);
}

.log-terminal .log-ts {
  color: #888;
}

.log-terminal .log-stream-link {
  color: #6db3f2;
  text-decoration: none;
  font-size: 0.85em;
}

.log-terminal .log-stream-link:hover {
  color: #a0d0ff;
}

.log-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.log-controls button {
  width: auto;
  margin: 0;
}

.log-controls input[type="text"] {
  margin: 0;
  max-width: 300px;
}

.log-controls label {
  margin: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.log-controls input[type="checkbox"] {
  margin: 0;
}

/* --- Subscription Testing --- */

.status-ready {
  background: #27ae60;
  color: #fff;
}

.status-advancing {
  background: #f39c12;
  color: #fff;
}

.status-premium {
  background: #27ae60;
  color: #fff;
}

.status-basic {
  background: #95a5a6;
  color: #fff;
}

.sub-account-row {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
}

article form .sub-account-row select,
article form .sub-account-row input,
article form .sub-account-row button,
article form .sub-account-row a[role="button"] {
  margin-bottom: 0;
  width: auto;
}

article form .sub-account-row button,
article form .sub-account-row a[role="button"] {
  white-space: nowrap;
  flex-shrink: 0;
}

article form .sub-account-row .sub-lookup-select {
  width: 10rem;
  flex-shrink: 0;
}

article form .sub-account-row .sub-lookup-input {
  flex: 1;
  min-width: 0;
}

.sub-clock-info {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.sub-advance-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.sub-advance-buttons button {
  padding: 0.4rem 0.8rem;
  font-size: 0.85em;
}

.sub-session-actions {
  margin-top: 0.75rem;
}

.sub-state-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.sub-prepare-warning {
  background: #ffeaa7;
  color: #2d3436;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.85em;
  margin-top: 0.75rem;
}

.sub-payment-hint {
  font-size: 0.8em;
  opacity: 0.7;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.sub-state-col h5 {
  margin-bottom: 0.5rem;
}

.sub-state-col table {
  font-size: 0.9em;
}

.sub-discrepancies {
  background: #ffeaa7;
  color: #2d3436;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.sub-discrepancies ul {
  margin-bottom: 0;
}

.sub-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.sub-actions-row h5 {
  margin-bottom: 0.5rem;
}

/* Webhook status colors */
.wh-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
}

.wh-processed {
  background: #27ae60;
  color: #fff;
}

.wh-failed {
  background: #c0392b;
  color: #fff;
}

.wh-duplicate, .wh-ignored {
  background: #95a5a6;
  color: #fff;
}

@media (max-width: 768px) {
  .sub-state-columns, .sub-actions-row {
    grid-template-columns: 1fr;
  }
  .sub-account-row {
    flex-wrap: wrap !important;
  }
}

/* --- Deployment --- */
.deploy-tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--pico-muted-border-color);
  color: var(--pico-color);
  margin-right: 0.25rem;
}
.deploy-tag-current {
  background: #198754;
  color: #fff;
}
.deploy-tag-last {
  background: #6c757d;
  color: #fff;
}
.deploy-current-row {
  background: rgba(25, 135, 84, 0.06);
}
.deploy-images-table td, .deploy-images-table th {
  vertical-align: middle;
}

/* --- Transcript viewer --- */
.transcript-segment {
  padding: 0.35rem 0;
  line-height: 1.5;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.transcript-segment:last-child {
  border-bottom: none;
}
.transcript-time {
  display: inline-block;
  min-width: 3.5rem;
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.transcript-speaker {
  display: inline-block;
  min-width: 6rem;
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: 0.5rem;
}
.transcript-text {
  font-size: 0.9rem;
}
.transcript-speaker-speaker-1 { color: #0d6efd; }
.transcript-speaker-speaker-2 { color: #198754; }
.transcript-speaker-speaker-3 { color: #dc3545; }
.transcript-speaker-speaker-4 { color: #6f42c1; }
.transcript-speaker-speaker-5 { color: #fd7e14; }
.transcript-speaker-speaker-6 { color: #20c997; }
.transcript-speaker-speaker-7 { color: #d63384; }
.transcript-speaker-speaker-8 { color: #0dcaf0; }
.transcript-speaker-speaker-9 { color: #ffc107; }
.transcript-speaker-speaker-10 { color: #6c757d; }

/* --- Account Panel Rail (shared right-column nav for per-account panels) --- */
.panel-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--pico-muted-border-color);
}
.panel-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius, 4px);
  text-decoration: none;
  color: var(--pico-color);
  background: transparent;
  font-size: 0.85em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.panel-rail-btn:hover {
  background: var(--pico-secondary-background, #f0f0f0);
  border-color: var(--pico-primary);
  color: var(--pico-color);
}
.panel-rail-btn.active,
.panel-rail-btn.active:hover {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse, #fff);
  border-color: var(--pico-primary);
  cursor: default;
}
.panel-rail-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.panel-rail-btn .material-symbols-outlined {
  font-size: 1.6em;
  line-height: 1;
}
.panel-rail-label {
  font-weight: 500;
  text-align: center;
}

/* ============================================================
   rc3_features — shared design-language + review-queue frame
   (docs/projects/rc3_features/). Built once, composed by
   Moderation, Support, and Account 360. Do NOT fork per screen
   (PD-8) — extend a class here instead. Extracted from the
   LOCKED handoff HTML's inline styles.
   ============================================================ */

/* --- Landing card icon (Material Symbols on a card-link) --- */
.card-ico { font-size: 1.9rem; line-height: 1; margin-bottom: 0.1rem; }

/* --- Review-queue frame: SLA header + status filter row --- */
.sla { display: flex; align-items: center; gap: 0.55rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.6rem 1rem; margin-bottom: 1.1rem; font-size: 0.95rem; }
.sla .material-symbols-outlined { font-size: 1.2rem; color: var(--pico-muted-color); }
.sla strong { font-weight: 700; }
/* aging: amber weight when the oldest item passes the SLA threshold — a signal, never red (design_language §1/§7) */
.sla.aging { border-color: #f39c12; background: #fff8e1; }

.filter-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-row .lbl { font-size: 0.8rem; color: var(--pico-muted-color); display: flex; align-items: center; gap: 0.3rem; }
.filter-row .lbl .material-symbols-outlined { font-size: 1rem; }
.filter-row a[role="button"] { padding: 0.2rem 0.85rem; font-size: 0.8rem; margin: 0; }

/* reason chip (queue) + target-type + reporter-count — de-coded category, neutral (not a status) */
.reason { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.12rem 0.5rem; border-radius: var(--pico-border-radius); background: #eef0f1; color: #4a5560; }
td .tgt-type { font-size: 0.8rem; color: var(--pico-muted-color); }
td .rc { font-weight: 700; }
.col-act { text-align: right; }

/* Responsive queue: table (desktop) → stacked cards (mobile). The review-queue frame's per-body
   row template renders both; this chrome + the chip filter are shared by every queue (community /
   media / support). Each queue supplies its own .q-card markup (design_language §8). */
.q-mobile { display: none; }
.q-card { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.7rem 0.8rem; margin-bottom: 0.7rem; }
.q-card .q-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.q-card .q-type { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pico-muted-color); }
.q-card .q-wait { font-size: 0.82rem; color: var(--pico-muted-color); white-space: nowrap; }
.q-card .q-title { font-weight: 600; margin: 0.3rem 0 0.5rem; font-size: 0.95rem; }
.q-card .q-title code { font-size: 0.86em; word-break: break-all; }
.q-card .q-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.q-card .q-rc { color: var(--pico-muted-color); font-size: 0.82rem; white-space: nowrap; }
.q-card a[role="button"] { width: 100%; margin: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 768px) {
  .q-desktop { display: none; }
  .q-mobile { display: block; }
  /* status filter → horizontal-scroll chip row (self-evident without the label; ≥40px touch) */
  .filter-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .filter-row .lbl { display: none; }
  .filter-row a[role="button"] { border-radius: 999px; min-height: 40px; white-space: nowrap; }
}

/* --- The 3-axis badge legibility (design_language §4) --- */
/* Axis 1: content_status — primary filled .status-badge (dominant). ACTIVE green / HIDDEN grey / LOCKED blue / REMOVED red (Neill-locked). */
.status-badge.cs-active  { background: #27ae60; color: #fff; }
.status-badge.cs-hidden  { background: #95a5a6; color: #fff; }
.status-badge.cs-locked  { background: #3498db; color: #fff; }
.status-badge.cs-removed { background: #c0392b; color: #fff; }
/* Axis 2: screening_state — lighter outline chip, "Auto:" prefix, subordinate (authored case — NOT CSS-uppercased) */
.auto-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; padding: 0.18rem 0.5rem; border-radius: var(--pico-border-radius); background: transparent; border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color); }
.auto-chip .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; }
.dot-pass { background: #27ae60; } .dot-flag { background: #f39c12; } .dot-reject { background: #c0392b; }
.axes { display: flex; align-items: flex-end; gap: 1.1rem; flex-wrap: wrap; margin: 0.5rem 0 0.25rem; }
.axes .axis { display: flex; flex-direction: column; gap: 0.2rem; }
.axes .axis-l { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pico-muted-color); }

/* --- Detail panels (service-layout left / result) --- */
.panel-h { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; font-size: 1rem; }
.panel-h .count { font-size: 0.72rem; color: var(--pico-muted-color); font-weight: 400; }
.panel-h .material-symbols-outlined { font-size: 1.15rem; }
.content-meta { font-size: 0.8rem; color: var(--pico-muted-color); margin-bottom: 0.5rem; }
.reporter { border-top: 1px solid var(--pico-muted-border-color); padding: 0.55rem 0; }
.reporter:first-of-type { border-top: none; }
.reporter .rsn { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: #4a5560; background: #eef0f1; padding: 0.08rem 0.45rem; border-radius: var(--pico-border-radius); margin-left: 0.4rem; }
.reporter .desc { font-size: 0.85rem; color: var(--pico-muted-color); margin: 0.2rem 0 0; }
.reporter code { font-size: 0.78rem; }
.hist { font-size: 0.85rem; border-top: 1px solid var(--pico-muted-border-color); padding: 0.45rem 0; display: flex; gap: 0.6rem; }
.hist:first-of-type { border-top: none; }
.hist .when { color: var(--pico-muted-color); white-space: nowrap; font-size: 0.78rem; min-width: 5.5rem; }

/* --- Action form (service-layout right) --- */
.action-group { margin-bottom: 1.4rem; }
.action-group h4 { margin-bottom: 0.5rem; font-size: 0.92rem; }
.transition-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.6rem; }
.transition-btns button { margin: 0; width: 100%; }
.reason-note { font-size: 0.72rem; color: var(--pico-muted-color); margin: 0.1rem 0 0.9rem; }
/* Material Symbols icon inside an action button */
.transition-btns button .material-symbols-outlined,
.action-group > button .material-symbols-outlined,
.action-group form > button .material-symbols-outlined { font-size: 1.1em; vertical-align: -0.22em; margin-right: 0.35rem; }

/* --- Workbench (moderation.md §3.3): acting-page flashes, confirm gate, mobile action sheet --- */
.wb-head { margin-bottom: 0.4rem; }
.wb-head h2 { margin-bottom: 0.2rem; }
.wb-head p { margin-bottom: 0; color: var(--pico-muted-color); }

/* result flash — success (green) / info (neutral). Page-level so it's visible at both breakpoints. */
.notice-success { background: #f0fdf4; border: 1px solid #86efac; color: #15803d; border-radius: var(--pico-border-radius); padding: 0.6rem 0.9rem; margin-bottom: 1rem; }
.notice-info { background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: var(--pico-border-radius); padding: 0.6rem 0.9rem; margin-bottom: 1rem; }

/* the two-step confirm gate — rendered page-level (visible on mobile even when the sheet is closed) */
.wb-confirm { margin-bottom: 1.2rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; }
.form-actions button, .form-actions a[role="button"] { margin: 0; }

/* orphan / not-found panel (E7 / E6) */
.orphan-note { border: 1px solid var(--pico-muted-border-color); background: #fbfbfb; }
.orphan-note .panel-h .material-symbols-outlined { color: var(--pico-muted-color); }

/* media-override segment (community media reports) */
.media-override .seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; }
.media-override .seg button { margin: 0; width: 100%; }

/* content-first deviation: the workbench keeps context on top at mobile — overrides the default
   service-layout form-on-top stack (moderation.md §1). Desktop is unaffected (service-layout grid). */
@media (max-width: 768px) {
  .service-layout.content-first .service-result { order: 1; }
  .service-layout.content-first .action-sheet { order: 2; }
  .service-layout.content-first .sheet-trigger { order: 3; }
}

/* --- The mobile action sheet (<dialog>) — the shared mobile primitive (PD-4/PD-8, sheet.js) --- */
/* Reset the UA dialog chrome so it can serve as an inline column on desktop. */
dialog.action-sheet { max-width: none; width: auto; border: none; padding: 0; margin: 0; background: transparent; color: inherit; overflow: visible; }
.sheet-trigger, .sheet-close { display: none; }

@media (min-width: 769px) {
  /* desktop: the sheet IS the sticky right column. display:block overrides the UA
     dialog:not([open]) rule — no modal, no backdrop, no JS needed. */
  dialog.action-sheet { display: block !important; position: sticky; top: 5rem; }
}

@media (max-width: 768px) {
  /* mobile: a sticky trigger opens the dialog as a bottom sheet (showModal → top layer). */
  .sheet-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    position: sticky; bottom: 1rem; width: 100%; margin: 1rem 0 0; z-index: 5; }
  .sheet-trigger .material-symbols-outlined { font-size: 1.15em; vertical-align: -0.22em; }
  dialog.action-sheet[open] { display: block; position: fixed; inset: auto 0 0 0; margin: 0;
    width: 100%; max-height: 85vh; overflow-y: auto; padding: 1.1rem 1.1rem 1.6rem;
    background: var(--pico-background-color); border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22); }
  dialog.action-sheet::backdrop { background: rgba(0, 0, 0, 0.45); }
  .sheet-close { display: inline-flex; margin: 0 0 0.3rem auto; padding: 0.2rem 0.4rem; }
}

/* --- Media queue/detail (moderation.md §3.4–§3.5): thumb placeholder + result cells --- */
.count-line { font-size: 0.85rem; color: var(--pico-muted-color); margin: 0.2rem 0 1rem; }
.thumb { width: 52px; height: 52px; min-width: 52px; border: 1px dashed var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: #fafafa; display: flex; align-items: center; justify-content: center; }
.thumb .material-symbols-outlined { font-size: 1.4rem; color: var(--pico-muted-color); opacity: 0.6; }
.res-unsafe { color: #a93226; font-weight: 600; }
.res-safe { color: #1e7e45; font-weight: 600; }
.conf { font-variant-numeric: tabular-nums; }
.entity-t { font-size: 0.78rem; color: var(--pico-muted-color); }
.entity-t code { font-size: 0.86em; word-break: break-all; }
/* media card head (mobile) — extends .q-card with a thumb + id row */
.q-head { display: flex; align-items: center; gap: 0.6rem; }
.q-head-id { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.q-head-id .q-title-sm { font-weight: 600; font-size: 0.9rem; }
.q-head-id .q-title-sm code { font-size: 0.86em; word-break: break-all; }

/* --- Media detail: classification badges, preview, override segment --- */
/* classification_state badge colours (parallel to the community cs-* map) */
.status-badge.mc-cleared    { background: #27ae60; color: #fff; }
.status-badge.mc-flagged    { background: #f39c12; color: #fff; }
.status-badge.mc-rejected   { background: #c0392b; color: #fff; }
.status-badge.mc-pending    { background: #95a5a6; color: #fff; }
.status-badge.mc-processing { background: #95a5a6; color: #fff; }
.title-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.card-h { margin: 0 0 0.5rem; font-size: 1rem; }
.seg-h { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.4rem; font-size: 0.95rem; }
.seg-h .material-symbols-outlined { font-size: 1.1rem; }
/* preview: real presigned image or the offline/no-derivative placeholder (E4) */
.media-preview { width: 100%; max-height: 22rem; object-fit: contain; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: #fafafa; }
.media-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; border: 2px dashed var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: #fafafa; color: var(--pico-muted-color); text-align: center; padding: 3rem 1rem; min-height: 12rem; }
.media-ph .material-symbols-outlined { font-size: 2.4rem; color: var(--pico-muted-color); opacity: 0.55; }
.media-ph .ph-t { font-weight: 600; color: #4a5560; font-size: 0.9rem; }
.media-ph .ph-s { font-size: 0.78rem; }
/* override segment — 3-up one-step Apply buttons (reuses the transition-btns idiom) */
.seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; margin: 0.5rem 0 0; }
.seg button { margin: 0; width: 100%; font-size: 0.82rem; padding: 0.4rem 0.2rem; }

/* --- Media search (true service page): filter grid + prompt state --- */
.search-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; }
.search-grid .full { grid-column: 1 / -1; }
.search-grid label { font-size: 0.8rem; }
.date-row { display: flex; gap: 0.6rem; align-items: center; }
.date-row input { margin-bottom: 0; }
.date-row span { color: var(--pico-muted-color); }
.search-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; flex-wrap: wrap; }
.search-actions button { margin: 0; }
.search-actions button .material-symbols-outlined { font-size: 1.1em; vertical-align: -0.22em; margin-right: 0.35rem; }
.req { font-size: 0.78rem; color: var(--pico-muted-color); }
.prompt-state { text-align: center; padding: 3rem 1rem; color: var(--pico-muted-color); }
.prompt-state .material-symbols-outlined { font-size: 2.2rem; color: var(--pico-muted-color); opacity: 0.5; margin-bottom: 0.5rem; }
.prompt-state h3 { color: var(--pico-color); margin-bottom: 0.2rem; }

/* --- Feedback triage (read-only): team-only tally + read-only tells --- */
.ro-banner { font-size: 0.82rem; color: var(--pico-muted-color); background: #f6f7f8; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.55rem 0.75rem; margin-bottom: 0.6rem; }
.reported-note { font-size: 0.8rem; color: var(--pico-muted-color); margin: 0 0 1rem; }
.react { font-weight: 700; font-variant-numeric: tabular-nums; color: #1a5f29; }
.ft-title { font-weight: 600; }
.ft-sub { font-size: 0.76rem; color: var(--pico-muted-color); }
.window-note { font-size: 0.8rem; color: var(--pico-muted-color); }

/* --- Content inspector (read-only): tabs + neutral category chip --- */
.insp-meta { font-size: 0.85rem; color: var(--pico-muted-color); margin-bottom: 0.6rem; }
.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.1rem; }
.tabs a { padding: 0.5rem 0.95rem; text-decoration: none; color: var(--pico-muted-color); border-bottom: 2px solid transparent; font-weight: 600; font-size: 0.9rem; }
.tabs a.active { color: var(--pico-color); border-bottom-color: var(--pico-primary); }
/* neutral category chip — NOT a status badge (a category isn't a "good" status; G3/G5) */
.cat-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: var(--pico-border-radius); background: transparent; border: 1px solid #8794a3; color: #3c4a57; }

/* --- Profile manager (acting page): lookup + standing card + blocks --- */
.lookup { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.2rem; }
.lookup .f { flex: 1; min-width: 260px; }
.lookup label { font-size: 0.78rem; }
.lookup input { margin-bottom: 0; }
.lookup button { margin: 0; white-space: nowrap; }
.lookup button .material-symbols-outlined { font-size: 1.1em; vertical-align: -0.22em; margin-right: 0.35rem; }
.prof-head { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.prof-head .pic { font-size: 2.4rem; color: var(--pico-muted-color); }
.prof-head h3 { margin: 0; }
.standing-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #a35711; border: 1px solid #f0c27a; background: #fef9e7; border-radius: var(--pico-border-radius); padding: 0.05rem 0.4rem; }
.counters { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 0.9rem 0 1rem; padding: 0.7rem 0; border-top: 1px solid var(--pico-muted-border-color); border-bottom: 1px solid var(--pico-muted-border-color); }
.counters .c .n { font-size: 1.25rem; font-weight: 700; line-height: 1.1; display: block; }
.counters .c .l { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pico-muted-color); }
.blk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.step-cue { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pico-muted-color); margin: 0.2rem 0 0.45rem; }
.confirm-actions { display: flex; gap: 0.5rem; margin-top: 0.2rem; }
.confirm-actions button, .confirm-actions a[role="button"] { margin: 0; }
.dual-note { font-size: 0.72rem; color: var(--pico-muted-color); margin: 0.55rem 0 0; }
.pivot { margin: 1rem 0 0; }
.pivot a[role="button"] { display: inline-flex; align-items: center; }
.pivot a[role="button"] .material-symbols-outlined { font-size: 1.1em; vertical-align: -0.22em; margin-right: 0.35rem; }
@media (max-width: 768px) { .blk-cols { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ============================================================
   Support (rc3_features Chunk 2) — case queue + conversation.
   Queue reuses the responsive-queue primitive; the conversation
   is the new body. No red tier anywhere (all reversible).
   ============================================================ */

/* --- Case queue: soft SLA + controls + cases table --- */
.queue-signal { font-size: 0.85rem; color: var(--pico-muted-color); margin: 0.2rem 0 1rem; }
.queue-signal strong { color: var(--pico-color); }
.controls { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.controls .switch { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin: 0; }
.controls .switch input { margin: 0; }
.filter-pills { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.filter-pills .lbl { font-size: 0.82rem; color: var(--pico-muted-color); display: flex; align-items: center; gap: 0.3rem; }
.filter-pills .lbl .material-symbols-outlined { font-size: 1rem; }
.filter-pills a[role="button"] { margin: 0; padding: 0.25rem 0.8rem; font-size: 0.82rem; }
.filter-pills a.inactive { background: #fff; color: #34495e; border: 1px solid var(--pico-muted-border-color); }
table.cases td, table.cases th { font-size: 0.86rem; vertical-align: middle; }
.case-ref { font-family: var(--pico-font-family-monospace); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.preview { color: var(--pico-color); }
.preview + .from, .from { color: var(--pico-muted-color); font-size: 0.78rem; }
.await { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: #a35711; background: #fef3e2; border: 1px solid #f0c27a; border-radius: var(--pico-border-radius); padding: 0.1rem 0.5rem; }
.replied { font-size: 0.78rem; color: var(--pico-muted-color); }
.wait { font-variant-numeric: tabular-nums; }
.acct { font-family: var(--pico-font-family-monospace); font-size: 0.78rem; color: var(--pico-muted-color); }
.review-btn { padding: 0.25rem 0.9rem; font-size: 0.82rem; margin: 0; }
/* case-status badges (parallel to cs-*/mc-*) */
.status-badge.st-open { background: #3477b8; color: #fff; }
.status-badge.st-resolved { background: #6b7785; color: #fff; }
.loadmore { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: 1.1rem; }
.loadmore a[role="button"] { margin: 0; }
.cursor-note { font-size: 0.76rem; color: var(--pico-muted-color); }

/* --- Case conversation: main (thread + composer) + sidebar --- */
.conv-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
.conv-main { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); display: flex; flex-direction: column; overflow: hidden; }
.conv-head { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--pico-muted-border-color); font-size: 0.82rem; color: var(--pico-muted-color); background: #fafbfc; }
.thread { padding: 1.1rem 0.9rem; display: flex; flex-direction: column; gap: 1rem; }
.bubble { max-width: 74%; }
.bubble .meta { font-size: 0.72rem; color: var(--pico-muted-color); margin-bottom: 0.25rem; }
.bubble .body { padding: 0.65rem 0.8rem; border-radius: 12px; font-size: 0.88rem; line-height: 1.45; white-space: pre-wrap; }
.bubble.user .body { background: #f1f3f5; border: 1px solid #e6e9ec; border-top-left-radius: 3px; }
.bubble.team { align-self: flex-end; }
.bubble.team .meta { text-align: right; }
.bubble.team .body { background: #e8f1fb; border: 1px solid #cfe1f3; border-top-right-radius: 3px; }
/* status changes are NOT bubbles — inline timeline markers */
.timeline-marker { align-self: center; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--pico-muted-color); }
.timeline-marker .material-symbols-outlined { font-size: 1rem; }
.timeline-marker.resolved { color: #1e7e45; }
.composer { border-top: 1px solid var(--pico-muted-border-color); padding: 0.8rem 0.9rem; background: #fafbfc; }
.composer textarea { margin-bottom: 0.5rem; min-height: 84px; font-size: 0.9rem; }
.composer-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.composer-row button { margin: 0; white-space: nowrap; }
.composer-row button .material-symbols-outlined { font-size: 1.1em; vertical-align: -0.22em; margin-right: 0.35rem; }
.send-note { font-size: 0.74rem; color: var(--pico-muted-color); }
.charcap { margin-left: auto; font-size: 0.72rem; color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
/* sidebar lives inside the action-sheet <dialog>; give it card chrome on desktop */
.sb-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; flex-wrap: wrap; }
.sb-acct { font-family: var(--pico-font-family-monospace); font-size: 0.82rem; color: var(--pico-muted-color); }
.sb-meta { font-size: 0.8rem; color: var(--pico-muted-color); border-top: 1px solid var(--pico-muted-border-color); margin-top: 0.7rem; padding-top: 0.7rem; line-height: 1.7; }
.sb-actions { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sb-actions button { margin: 0; width: 100%; }
.sb-actions button .material-symbols-outlined { font-size: 1.1em; vertical-align: -0.22em; margin-right: 0.35rem; }
.pivot { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; }
.pivot .material-symbols-outlined { font-size: 1.05em; vertical-align: -0.2em; }
@media (min-width: 769px) {
  /* the case sidebar dialog gets card chrome inline on desktop */
  .conv-layout dialog.action-sheet { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.9rem 1rem; background: #fff; }
}
@media (max-width: 768px) { .conv-layout { grid-template-columns: 1fr; } }

/* ============================================================
   Account 360 (rc3_features Chunk 3) — rail panels under /users/lookup.
   The account-context line leads every panel; all Overrides + Compliance
   writes are reversible (no red tier — that's the User Data cluster).
   ============================================================ */
.acct-context { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.55rem 0.8rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: #fafbfc; margin-bottom: 1rem; font-size: 0.85rem; }
.acct-context .email { font-weight: 600; }
.acct-context .aid { font-family: var(--pico-font-family-monospace); font-size: 0.76rem; color: var(--pico-muted-color); word-break: break-all; }
.tier { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.1rem 0.5rem; border-radius: var(--pico-border-radius); background: #efe7fb; color: #6b3fa0; }

/* Overrides — limits table + prefs/quiet-hours */
.ov-h { margin: 1.1rem 0 0.5rem; font-size: 1rem; }
.ov-h:first-of-type { margin-top: 0.2rem; }
table.lim td, table.lim th { font-size: 0.84rem; vertical-align: middle; padding: 0.35rem 0.5rem; }
.lim code { font-family: var(--pico-font-family-monospace); font-size: 0.8rem; }
.ov-yes { font-size: 0.68rem; font-weight: 700; color: #6b3fa0; background: #efe7fb; border-radius: var(--pico-border-radius); padding: 0.05rem 0.45rem; }
.ov-no { color: var(--pico-muted-color); }
.lim-form { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.lim-input { width: 90px; margin: 0; padding: 0.15rem 0.4rem; }
.lim-act { margin: 0; padding: 0.15rem 0.7rem; font-size: 0.78rem; }
.prefs { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.3rem 0.9rem; margin-bottom: 0.5rem; }
.prefs .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--pico-muted-border-color); font-size: 0.88rem; }
.prefs .row:last-child { border-bottom: none; }
.prefs .lbl code { font-family: var(--pico-font-family-monospace); font-size: 0.78rem; color: var(--pico-muted-color); }
.prefs .ctl { display: flex; align-items: center; gap: 0.6rem; }
.prefs input[type=number] { width: 90px; margin: 0; }
.prefs input[type=time] { width: 150px; margin: 0; }
.prefs input[type=checkbox] { margin: 0; }

/* Compliance — flags + env-split write toggles */
table.compliance th { white-space: nowrap; text-align: left; padding: 0.4rem 1rem 0.4rem 0; font-weight: 600; vertical-align: top; }
table.compliance td { padding: 0.4rem 0; }
.flag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: var(--pico-border-radius); }
.flag-yes { background: #e7f6ec; color: #1a7f37; }
.flag-no { background: #f1f3f5; color: var(--pico-muted-color); }
.cmp-form { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0 0; }
.cmp-form .switch { margin: 0; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.35rem; }

/* User Data — entity grid, bootstrap, and the FIRST RED DESTRUCTION TIER (§3.4) */
.ent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ent-card { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.8rem 0.9rem; text-decoration: none; color: inherit; display: flex; align-items: center; justify-content: space-between; }
.ent-card:hover { border-color: var(--pico-primary); }
.ent-card h4 { margin: 0 0 0.25rem; font-size: 1rem; }
.ent-card .counts { font-size: 0.85rem; color: var(--pico-muted-color); }
.ent-card .counts .n { font-weight: 700; color: var(--pico-color); }
.ent-card::after { content: '›'; color: var(--pico-muted-color); font-size: 1.4rem; line-height: 1; margin-left: 0.6rem; }
.bootstrap-cta { border: 1px solid var(--pico-muted-border-color); }
.bootstrap-form label { display: block; margin-bottom: 0.6rem; }
.back-link { font-size: 0.85rem; color: var(--pico-muted-color); text-decoration: none; }
.inline-form { display: inline; margin: 0 0 0 0.3rem; }
@media (max-width: 768px) { .ent-grid { grid-template-columns: 1fr; } }

/* red-outline signpost (matches the existing "Disable Account" pattern) — NOT solid red;
   solid red button.destructive is the gate commit only (avoids a per-row wall of red). */
.destructive-outline { background: #fff; color: #c0392b; border: 1px solid #c0392b; margin: 0; }
.destructive-outline:hover { background: #fdeded; color: #a93226; border-color: #a93226; }

/* the destructive confirm — red, overriding the reversible amber .confirmation-box */
.destructive-confirm { border: 2px solid #c0392b; background: #fdedec; }
.destructive-confirm h4 { color: #c0392b; margin-bottom: 0.5rem; }
.danger-copy { color: #a93226; }
.destructive-confirm label { display: block; margin: 0.5rem 0 0.3rem; }
.destructive-confirm input[type=text] { max-width: 220px; text-transform: uppercase; letter-spacing: 0.08em; }
.destructive-confirm .destructive { margin: 0.6rem 0.5rem 0 0; }
.destructive-confirm a[role="button"] { margin-top: 0.6rem; }

/* hold-to-confirm — the fill sweeps over the hold duration (archive gate) */
.hold-btn { position: relative; overflow: hidden; margin: 0.4rem 0 0; }
.hold-btn .hold-fill { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); transform: scaleX(0); transform-origin: left; }
.hold-btn.holding .hold-fill { transform: scaleX(1); transition: transform 1s linear; }
.hold-btn.held .hold-fill { transform: scaleX(1); }
.hold-btn .hold-label { position: relative; z-index: 1; }

/* ─── rc3_features · Ops (OPS-1 env-wide media cleanup) ─────────────────────────
   The apex of the red destruction tier. Service-layout ops screen: read-only preview
   (green READ-ONLY) → typed-env-name apex gate → per-sweep audit. Reuses .service-layout,
   .confirmation-box.destructive-confirm, .danger-copy, button.destructive. */
.ops-head { margin-bottom: 1.1rem; }
.ops-head p { color: var(--pico-muted-color); font-size: 0.9rem; margin: 0.15rem 0 0; }

/* the form card (right column) */
.service-form .env-target { display: flex; align-items: center; gap: 0.5rem; font-family: var(--pico-font-family-monospace); font-size: 0.86rem; background: var(--pico-code-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.4rem 0.6rem; margin-bottom: 1rem; font-weight: 700; }
.service-form .env-target.env-target-prod { background: #fbe9e7; border-color: #ef5350; color: #c62828; }
.service-form .env-target .en { font-family: var(--pico-font-family); font-size: 0.76rem; font-weight: 400; color: var(--pico-muted-color); }
.service-form .help { color: var(--pico-muted-color); font-weight: 400; font-size: 0.78rem; }
.service-form input[type=number] { margin-bottom: 1rem; }
.ops-preview-btn, .ops-run-btn { width: 100%; margin: 0 0 0.6rem; }
.ops-run-btn { margin-bottom: 0; }
.form-note { font-size: 0.78rem; color: var(--pico-muted-color); margin: 0.7rem 0 0; }

/* idle + deferred-cron note (E5) */
.ops-idle { color: var(--pico-muted-color); font-size: 0.95rem; margin: 0; }
.cron-note { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.86rem; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 4px; color: #664d03; padding: 0.7rem 0.9rem; margin-top: 1rem; line-height: 1.5; }
.cron-note .material-symbols-outlined { font-size: 1.15rem; color: #a35711; margin-top: 0.05rem; }

/* preview + result panel heads + badges */
.ops-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.ops-panel-head h3 { margin: 0; font-size: 1.15rem; }
.ro-badge { font-size: 0.7rem; font-weight: 700; background: #e7f6ec; color: #1a7f37; border-radius: 1rem; padding: 0.18rem 0.6rem; white-space: nowrap; }
.done-badge { font-size: 0.7rem; font-weight: 700; background: #eef0f1; color: #4a5560; border-radius: 1rem; padding: 0.18rem 0.6rem; white-space: nowrap; }
.ops-empty { font-size: 0.92rem; color: var(--pico-muted-color); background: #f6fbf7; border: 1px solid #cfe8d4; border-radius: var(--pico-border-radius); padding: 0.7rem 0.9rem; margin: 0 0 0.7rem; }
.ops-note { font-size: 0.85rem; color: var(--pico-muted-color); background: #f6fbf7; border: 1px solid #cfe8d4; border-radius: var(--pico-border-radius); padding: 0.6rem 0.8rem; margin-top: 0.3rem; }

/* the sweeps (preview = sentence form; result = metric rows) */
.sweep { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.75rem 0.9rem; margin-bottom: 0.7rem; }
.sweep-h { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.sweep-h .material-symbols-outlined { font-size: 1.2rem; color: #5a6570; }
.sweep-sub { font-weight: 400; color: var(--pico-muted-color); font-size: 0.8rem; }
.sweep-body { font-size: 0.88rem; color: var(--pico-color); line-height: 1.5; }
.sweep-body .n { font-weight: 700; }
.sweep-body .retain { color: #a35711; }
.metric-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; font-size: 0.88rem; border-bottom: 1px solid var(--pico-muted-border-color); }
.metric-row:last-child { border-bottom: none; }
.metric-row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.metric-row .v.retain { color: #a35711; }
.metric-row .v.err { color: #c0392b; }
.metric-row code { font-family: var(--pico-font-family-monospace); font-size: 0.78rem; color: var(--pico-muted-color); }
.retain-explain { font-size: 0.82rem; color: #a35711; margin: 0.5rem 0 0; }

/* the apex gate — env-wide fleet-purge confirm (typed-env-name; reuses .destructive-confirm) */
.ops-apex .scope-line { font-size: 0.95rem; line-height: 1.55; margin: 0 0 0.7rem; }
.ops-apex .fleet-note { font-size: 0.9rem; line-height: 1.5; background: #fdedec; border: 1px solid #f0b7b0; border-radius: var(--pico-border-radius); padding: 0.6rem 0.8rem; margin: 0 0 0.8rem; color: var(--pico-color); }
.ops-apex .undone { font-weight: 700; color: #9a2520; }
.ops-apex .preview-nudge { font-size: 0.85rem; color: var(--pico-muted-color); margin: 0 0 0.9rem; }
.ops-apex .token-err { font-size: 0.82rem; font-weight: 600; color: #c0392b; margin: 0 0 0.5rem; }
.ops-apex label { font-size: 0.9rem; }
.ops-apex label code { font-family: var(--pico-font-family-monospace); background: #fdeceb; color: #9a2520; padding: 0.08rem 0.45rem; border-radius: var(--pico-border-radius); }
/* env names are lowercase — override the .destructive-confirm uppercase/letter-spacing */
.ops-apex input.token-input { max-width: 320px; text-transform: none; letter-spacing: normal; font-family: var(--pico-font-family-monospace); margin-bottom: 0.7rem; }
.ops-apex .ops-commit { width: 100%; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.ops-apex .ops-commit .material-symbols-outlined { font-size: 1.1rem; }
.ops-apex .run-cap { font-size: 0.78rem; color: var(--pico-muted-color); text-align: center; margin: 0.5rem 0 0; }
.ops-apex .ops-cancel { width: 100%; margin-top: 0.7rem; }

/* ─── rc3_features · Campaigns (Chunk 4 — design-language pass) ─────────────────
   Extends the existing /notifications/* surface. Campaign Send = green (brand comm-primary,
   a plain primary button); Cancel = AMBER terminal-caution (NEVER red — red is data-destruction
   only). Status badges already exist above (.status-draft/scheduled/sending/sent/cancelled).
   The CANCELLED *status badge* stays red; the Cancel *action* is amber (status ≠ action). */
button.btn-amber, a[role="button"].btn-amber { background: #e67e22; border-color: #e67e22; color: #fff; }
button.btn-amber:hover, a[role="button"].btn-amber:hover { background: #ca6a16; border-color: #ca6a16; }
button.btn-amber.outline, a[role="button"].btn-amber.outline { background: transparent; color: #ca6a16; }
button.btn-amber.outline:hover, a[role="button"].btn-amber.outline:hover { background: #fdf2e6; }
/* the content-lock / terminal / can't-recall notes inside a campaign confirm — amber, informational */
.camp-note { font-size: 0.85rem; background: #fef5e7; border-left: 3px solid #e67e22; padding: 0.5rem 0.75rem; color: #7e4e12; border-radius: 4px; margin: 0.6rem 0; }
.camp-note strong { color: #6b3d0a; }
/* name-the-destination callout on the test-send confirm (G6 footgun-closer) — neutral emphatic */
.dest-note { font-size: 0.88rem; background: var(--pico-code-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.55rem 0.75rem; margin: 0.5rem 0; }
.dest-note code { font-size: 0.82rem; }