/* Conditions Now panel — v0.6 (docs/conditions-now.md)
 *
 * Design notes:
 *  - Uses the same design tokens as coach.css (color/space/radius/font).
 *    No hardcoded palette values — the panel automatically inherits the
 *    editorial navy light theme AND the dark theme without extra rules.
 *  - Card grid, not a table: mobile-friendly, wraps naturally, no rows to
 *    keep in visual alignment on a narrow screen.
 *  - Pills for OBSERVED / PREDICTED are the visual carrier for time-honesty
 *    (concepts/time-honesty in the project wiki). PREDICTED is intentionally
 *    lower-weight than OBSERVED so measurements read stronger than
 *    harmonic forecasts.
 *  - No animation, no shimmer loading state. Panel appears, panel updates,
 *    panel goes away. This is a data card, not a marketing surface.
 */

.cond-panel {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.cond-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cond-panel__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.cond-panel__time {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.cond-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.cond-panel__foot {
  margin-top: var(--space-4);
  font-size: 0.75rem;
  color: var(--color-text-faint);
  text-align: right;
}

/* ---------- empty / loading / error states ---------- */

.cond-panel__empty,
.cond-panel__loading {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.cond-panel__error {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
}

.cond-panel__error-title {
  font-weight: 600;
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}

.cond-panel__error-detail {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- individual reading card ---------- */

.cond-card {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cond-card__kind {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cond-card__value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  /* Allow word-level wrap ("Flooding 1.46" -> two lines is fine) but never
     break inside a number. Auxiliary detail lives on the meta line so
     the value stays short in the first place. */
  overflow-wrap: normal;
  word-break: normal;
}

.cond-card__num {
  font-weight: 600;
}

.cond-card__unit {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 2px;
}

.cond-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.72rem;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.cond-card__station,
.cond-card__ago,
.cond-card__aux {
  white-space: nowrap;
}

.cond-card__aux {
  color: var(--color-text-muted);
  font-weight: 500;
}

.cond-card__ago::before {
  content: '· ';
  color: var(--color-border);
}

.cond-card__station:first-child::before {
  content: '';
}

/* ---------- tide events sub-list ---------- */

.cond-card__events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cond-card__event {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.cond-card__event-kind {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: var(--space-2);
}

.cond-card__event-time {
  font-weight: 500;
}

.cond-card__event-h {
  color: var(--color-text-muted);
}

/* ---------- pills: OBSERVED / PREDICTED / STALE ---------- */

.cond-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}

.cond-pill--obs {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

.cond-pill--pred {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.cond-pill--stale {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
}

/* ---------- unavailable card variant ---------- */

.cond-card--unavailable {
  border-style: dashed;
  background: transparent;
}

.cond-card__unavail-msg {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
}