/* Osprey Daily Update — the status view and the Rankings strip.
 *
 * Additive only. No rule in dashboard.css or native-rankings.css is edited or overridden; every
 * selector is scoped under #daily-update-view or uses a new `du-` class, and every colour, radius
 * and spacing step comes from the existing theme tokens so both themes and the 768px breakpoint
 * apply without restating them.
 */

/* `display: flex` below would otherwise beat the user-agent rule for the `hidden` attribute. */
#daily-update-view[hidden] { display: none; }

#daily-update-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.du-panel { display: flex; flex-direction: column; gap: 12px; }

.du-heading { display: flex; flex-direction: column; gap: 4px; }

.du-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }

.du-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.du-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.du-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.du-card-wide { grid-column: 1 / -1; }

.du-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.du-state { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.du-state-published_dated, .du-state-already_published { color: var(--success); }
.du-state-parity_mismatch, .du-state-input_rejected, .du-state-conflict,
.du-state-failed_needs_review, .du-state-waiting_for_target { color: var(--warning); }

.du-message { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.du-big { font-size: 20px; font-weight: 600; color: var(--text-primary); }

.du-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.du-fact { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-muted); }
.du-fact-done { color: var(--text-primary); }
.du-fact-mark { width: 14px; text-align: center; }
.du-fact-done .du-fact-mark { color: var(--success); }
.du-fact-detail { color: var(--text-secondary); }

.du-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-muted); }

.du-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.du-grid {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
}
.du-grid dt { color: var(--text-muted); }
.du-grid dd { margin: 0; color: var(--text-primary); }

.du-warning {
  font-size: 12px;
  color: var(--text-primary);
  background: var(--warning-bg);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}

.du-table-wrap { overflow-x: auto; }
.du-table { width: 100%; }

.du-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.du-label { font-size: 12px; color: var(--text-secondary); }
.du-upload-result { font-size: 12px; color: var(--text-primary); }

.du-stopped { border-color: var(--warning); }

/* The Rankings strip: one quiet line above the Rankings panels. */
.du-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.du-strip-item { white-space: normal; }

/* WF4OPS-0: the time the shown status was produced (N01), typed hold reasons (F25), the FMP card. */
.du-checked { font-size: 11px; color: var(--text-muted); margin: 0 0 8px; }

.du-reason { font-size: 11px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.du-fmp .du-grid dd { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  #daily-update-view { padding: 10px; }
  .du-cards { grid-template-columns: 1fr; }
  .du-grid { grid-template-columns: 1fr; }
}