/* Load after styles.css. Shared shell only; existing component body styles stay in place. */
figure.frame {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: var(--space-6, 24px) 0;
  padding: var(--space-4, 16px);
  border-radius: var(--radius-frame, 8px);
  background: var(--surface);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.frame .frame-title {
  margin: 0 0 var(--space-3, 12px) !important;
  color: var(--fg);
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
}
.frame > .frame-body {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.frame .rc-grid { min-width: 338px; }
.frame.data-chart .frame-body > svg { min-width: 480px; }
figure.frame > .frame-caption {
  margin: var(--space-3, 12px) 0 0;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: var(--font-small, 13px);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.frame-note { color: var(--muted); }
.frame-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, 8px) var(--space-4, 16px);
  margin-top: var(--space-2, 8px);
  color: var(--faint);
  font-size: var(--font-caption, 12px);
}
.frame-footer:first-child { margin-top: 0; }
.frame .frame-source { flex: 1 1 200px; min-width: 0; color: var(--faint); }
.frame-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-4, 16px); margin-left: auto; }
.frame .frame-action { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
.frame .frame-action:hover { text-decoration: underline; }
.frame .frame-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 480px) {
  .frame-actions { margin-left: 0; }
}