/*
 * The safety centre — age check, family centre and the guardian's child-settings pages (§10).
 *
 * ### One column, on purpose
 *
 * These pages are read, not scanned: a guardian choosing which capabilities to ask for needs the
 * sentence next to the checkbox, not a dashboard. The measure matches the privacy centre so the
 * two control surfaces feel like rooms of the same house — the account's own space, not an admin
 * area.
 *
 * ### The tabs are a list of links, not a widget
 *
 * The age check and the family centre are their own pages, so the tab bar is plain anchors with
 * an active state — the browser's back button, bookmarks and a shared link all keep working.
 *
 * ### Cards are the link vocabulary
 *
 * Every guardian or child link renders as one card: the person on the other end, the status, the
 * powers the link carries and the actions its state allows. Pending invitations put their
 * decisions at the bottom of the card where the eye lands after reading what is being offered.
 *
 * ### The removal region earns its colour
 *
 * Ending an active link is the one action on the child-settings page that immediately changes
 * what the guardian may do, so its region carries a warning surface and its button is the only
 * red one on the page. Colour is the affordance; the audit trail is the record.
 */

.safety-center {
    max-width: 42rem;
    margin-inline: auto;
}

.safety-center__back {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
}

/* ---- Tabs ------------------------------------------------------------------------------------ */

.safety-center__nav {
    margin-bottom: var(--space-5);
    border-bottom: var(--border-width) solid var(--colour-border);
}

.safety-center__tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.safety-center__tab-link {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    color: var(--colour-ink-quiet);
    text-decoration: none;
    font-weight: var(--weight-medium);
}

.safety-center__tab-link:hover {
    color: var(--colour-ink);
    background-color: var(--colour-surface-sunken);
}

/* The active tab sits on the section's top border like a folder tab, the way the privacy
   centre's tabs do, so the page below reads as the room that tab names. */
.safety-center__tab-link--active {
    color: var(--colour-primary);
    background-color: var(--colour-primary-surface);
}

/* ---- Sections -------------------------------------------------------------------------------- */

.safety-center__section + .safety-center__section {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--colour-border);
}

.safety-center__heading {
    margin-top: 0;
    font-size: var(--text-lg);
}

.safety-center__subheading {
    margin-top: 0;
    font-size: var(--text-base);
}

.safety-center__subsection {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: var(--border-width) dashed var(--colour-border);
}

.safety-center__lede {
    color: var(--colour-ink-quiet);
    max-width: var(--measure);
}

.safety-center__note {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.safety-center__empty {
    color: var(--colour-ink-quiet);
}

.safety-center__error {
    margin: var(--space-3) 0 0;
}

/* ---- Current-state block ---------------------------------------------------------------------- */

.safety-center__status {
    padding: var(--space-4);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    background-color: var(--colour-surface-sunken);
}

.safety-center__status-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.safety-center__status-line + .safety-center__status-line {
    margin-top: var(--space-1);
}

.safety-center__status-label {
    color: var(--colour-ink-quiet);
    min-width: 9rem;
}

.safety-center__status-note {
    margin: var(--space-3) 0 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

/* ---- Forms: the option lists ------------------------------------------------------------------- */

/* A fieldset with no frame: the section heading already says what these are. */
.safety-center__options {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.safety-center__form .field {
    margin-bottom: var(--space-4);
}

/* The options fieldset already spaces its rows with a gap; without this the form rule above
   would add a second margin and the choices would sit twice as far apart. */
.safety-center__options .field {
    margin-bottom: 0;
}

/* ---- Link cards -------------------------------------------------------------------------------- */

.safety-center__cards {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.safety-center__card {
    padding: var(--space-4);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
}

.safety-center__card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.safety-center__card-name {
    font-weight: var(--weight-medium);
}

.safety-center__card-status {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.safety-center__card-meta {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
}

/* The label stacks above the value: an inline label column let a long wrapped value slip
   underneath it, which read as a broken card. */
.safety-center__meta-label {
    display: block;
    color: var(--colour-ink-quiet);
    font-size: var(--text-xs);
    margin-bottom: var(--space-1);
}

.safety-center__card .safety-center__note {
    margin: var(--space-3) 0 0;
}

.safety-center__card-actions {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ---- History table ------------------------------------------------------------------------------ */

/* The assurance trail is short by design — declarations are rate-limited — so it borrows the
   quiet, row-lined look of the privacy centre's table. */
.safety-center__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.safety-center__table th,
.safety-center__table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: var(--border-width) solid var(--colour-border);
}

.safety-center__table th {
    color: var(--colour-ink-quiet);
    font-weight: var(--weight-medium);
}

/* ---- Callout and danger region ------------------------------------------------------------------- */

.safety-center__callout {
    padding: var(--space-4);
    border: var(--border-width) solid var(--colour-info);
    border-radius: var(--radius-md);
    background-color: var(--colour-info-surface);
}

.safety-center__callout-text {
    margin: 0;
}

.safety-center__danger {
    padding: var(--space-4);
    border: var(--border-width) solid var(--colour-error);
    border-radius: var(--radius-md);
    background-color: var(--colour-error-surface);
}