/* ============================================================
   RAD Live: layered on top of styles.css + rad.css.
   Only the pieces the live view adds. Everything else (tiles,
   panels, pills, callouts) is inherited so the two RAD pages
   read as one product.
   ============================================================ */

/* Freshness. Always visible: a page that is silently out of date
   is worse than one that is obviously broken. */
.freshbar {
  font-size: 12.5px; color: var(--faint);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; margin: 14px 0 18px;
}
.freshbar.stale {
  color: var(--text);
  border-color: color-mix(in srgb, var(--rad-critical) 55%, var(--border));
  background: color-mix(in srgb, var(--rad-critical) 8%, var(--surface));
}

/* The "needs you now" panel gets a visible edge, since it is the reason
   the page exists. */
.panel.urgent { border-color: color-mix(in srgb, var(--rad-serious) 45%, var(--border)); }

.acts { display: flex; flex-direction: column; }
.act {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.act:last-child { border-bottom: none; }
.act-icon {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; line-height: 1;
  background: var(--surface-3); color: var(--faint);
  border: 1px solid var(--border);
}
/* Status colour is never the only signal: each card also carries an
   icon and an explicit sentence. */
.act-critical .act-icon { color: var(--rad-critical); border-color: color-mix(in srgb, var(--rad-critical) 50%, var(--border)); }
.act-serious  .act-icon { color: var(--rad-serious);  border-color: color-mix(in srgb, var(--rad-serious) 50%, var(--border)); }
.act-warning  .act-icon { color: var(--rad-warning);  border-color: color-mix(in srgb, var(--rad-warning) 50%, var(--border)); }

.act-body { flex: 1 1 auto; min-width: 0; }
.act-title { font-weight: 600; font-size: 14.5px; }
.act-prop { margin-top: 3px; font-size: 13.5px; }
.act-prop .faint { font-size: 12px; margin-left: 4px; }
.act-when { margin-top: 5px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.act-msg  { margin-top: 7px; font-size: 12.5px; color: var(--faint);
            border-left: 3px solid var(--border); padding-left: 10px; }
.act-cta {
  flex: 0 0 auto; align-self: center; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 12px; font-size: 13px; color: var(--text);
}
.act-cta:hover { border-color: var(--accent); background: var(--surface-3); text-decoration: none; }

/* Nothing outstanding */
.allclear { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.allclear-mark {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--rad-good);
  border: 1px solid color-mix(in srgb, var(--rad-good) 50%, var(--border));
  background: color-mix(in srgb, var(--rad-good) 10%, var(--surface-2));
}

/* Provisional money must never read as a promise. */
.chip-prov {
  display: inline-block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; font-weight: 700;
  color: var(--rad-warning);
  border: 1px solid color-mix(in srgb, var(--rad-warning) 45%, var(--border));
  background: color-mix(in srgb, var(--rad-warning) 10%, var(--surface-2));
}
.tile.risky { border-color: color-mix(in srgb, var(--rad-warning) 45%, var(--border)); }
.tile.risky .v { color: var(--rad-warning); }

/* Picker cards are links now (permanent URLs), not buttons. */
a.dlg-card { display: block; text-decoration: none; }
a.dlg-card:hover { text-decoration: none; }
.dlg-card .meta .need  { color: var(--rad-serious); }
.dlg-card .meta .clear { color: var(--faint); }
.picker input.bad { border-color: var(--rad-critical); }

.hero-sub { color: var(--muted); margin-top: 4px; max-width: 62ch; }
a.backlink { display: inline-block; color: var(--accent-2); margin-bottom: 12px; }

@media (max-width: 640px) {
  .act { flex-wrap: wrap; }
  .act-cta { width: 100%; text-align: center; margin-top: 4px; }
}

/* Voting power on a picker card: the reason the list is in the order it is. */
.dlg-card .vp { font-size: 11.5px; color: var(--faint); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* A proposal the delegate did not vote on. Present so the table matches the
   "voted 1 of 3" count, but visibly not part of their earnings. */
tr.row-muted td { color: var(--faint); }
tr.row-muted td a { color: var(--muted); }

/* Top-level callouts need to breathe before the next panel. Scoped to direct
   children of #app so callouts nested inside a panel are unaffected. */
#app > .callout { margin-bottom: 18px; }