/* MVP Family: the few pieces mvp-pro.css has no component for.
   Tokens only (no raw colours or sizes), so the design system stays the
   single source of truth. Loaded after mvp-pro.css and theme.css. */

/* Today page: name | status and usage | actions */
.family-list .stack { min-width: 0; }
.family-list h3 a { color: var(--c-ink); text-decoration: none; }
.family-list h3 a:hover { color: var(--c-brand); }

/* Screen time used today, as a thin bar */
.usage {
  width: 100%;
  height: var(--space-2);
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  overflow: hidden;
}
.usage::-webkit-progress-bar { background: var(--c-surface-2); }
.usage::-webkit-progress-value { background: var(--c-brand); }
.usage::-moz-progress-bar { background: var(--c-brand); }

.child-stats { margin-top: var(--space-5); }

/* Today page: requests sit above the children, with room before the list */
.requests { margin-bottom: var(--space-7); }

/* Edit time limit: one readable column, From/Until side by side */
.rules-form { max-width: 32rem; }
.rules-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rules-slot .field { flex: 1 1 8rem; }
.form-actions { margin-top: var(--space-5); }
.invite-url { flex: 1 1 20rem; min-width: 0; }

/* On a phone the side panel sits on top: keep it short by laying the links in a row. */
@media (max-width: 899px) {
  .admin-side { padding: var(--space-4) var(--gutter); }
  .admin-nav { flex-direction: row; flex-wrap: wrap; margin-top: var(--space-3); }
}