/*
 * The privacy centre — settings, consents, data export and account deletion (§9).
 *
 * ### One column, on purpose
 *
 * These pages are read, not scanned: a person deciding whether search engines may index their
 * profile needs the sentence next to the checkbox, not a dashboard. The measure stays narrow,
 * the same width the other settings pages use, so the centre feels like part of the account's
 * own space rather than an admin area.
 *
 * ### The tabs are a list of links, not a widget
 *
 * Each room of the centre is its own page, so the tab bar is plain anchors with an active state —
 * the browser's back button, bookmarks and a shared link all keep working. The active tab is the
 * only loud one; the rest stay quiet until hovered.
 *
 * ### The danger zone earns its colour
 *
 * Account deletion is the one action on these pages that cannot eventually be undone, so its
 * region carries a warning surface and its button is the only red one in the centre. Colour is
 * the affordance; the grace window is the protection, and both the consequences list and the
 * script-layer confirmation say so in words.
 */

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

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

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

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

.privacy-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);
}

.privacy-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, so the page below reads as
   the room that tab names. */
.privacy-center__tab-link--active {
    color: var(--colour-primary);
    background-color: var(--colour-primary-surface);
}

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

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

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

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

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

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

/* ---- Settings: the three toggles -------------------------------------------------------------- */

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

/* ---- Related-settings links -------------------------------------------------------------------- */

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

.privacy-center__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
}

.privacy-center__link:hover {
    border-color: var(--colour-primary);
    background-color: var(--colour-surface-sunken);
}

.privacy-center__link-label {
    font-weight: var(--weight-medium);
}

/* Label and hint stack inside the card so the whole tile reads as one destination; the chevron
   on the trailing edge says "this goes somewhere" without a word. */
.privacy-center__link-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.privacy-center__link-hint {
    margin: 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.privacy-center__link-chevron {
    flex-shrink: 0;
    color: var(--colour-ink-faint);
}

/* ---- Consents: the trail ------------------------------------------------------------------------ */

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

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

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

.privacy-center__topic-title {
    margin: 0;
    font-size: var(--text-base);
}

.privacy-center__topic-hint {
    margin: var(--space-2) 0 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.privacy-center__topic-meta {
    margin: var(--space-2) 0 0;
    color: var(--colour-ink-faint);
    font-size: var(--text-sm);
}

.privacy-center__topic-actions {
    margin-top: var(--space-3);
    display: flex;
    gap: var(--space-2);
}

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

/* ---- Data export -------------------------------------------------------------------------------- */

/* The one-time link sits in a callout so it cannot be mistaken for an ordinary button: the words
   around it say once and expiring, and the block says look here. */
.privacy-center__callout {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: var(--border-width) solid var(--colour-info);
    border-radius: var(--radius-md);
    background-color: var(--colour-info-surface);
}

.privacy-center__callout-title {
    margin: 0;
    font-size: var(--text-base);
}

.privacy-center__callout-text {
    margin: var(--space-2) 0 var(--space-3);
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

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

/* The history table is short by design — exports are rate-limited — so it borrows the quiet,
   row-lined look of the admin tables without their density. */
.privacy-center__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

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

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

/* ---- Account deletion --------------------------------------------------------------------------- */

.privacy-center__pending {
    padding: var(--space-4);
    border: var(--border-width) solid var(--colour-warning);
    border-radius: var(--radius-md);
    background-color: var(--colour-warning-surface);
}

.privacy-center__pending-title {
    margin: 0;
    font-size: var(--text-base);
}

.privacy-center__pending-text {
    margin: var(--space-2) 0 var(--space-3);
}

/* The danger region: a warning surface around the consequences and the form, so the eye registers
   "careful" before reading a word. */
.privacy-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);
}

.privacy-center__consequences {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--colour-ink);
}