/* OAuth consent page: the extension's tokens and controls (highlights.css), arranged as one centred
   card. Only layout and the few pieces unique to this page live here. */

main.consent-page {
  justify-content: center;
  max-width: 400px;
  padding-block: var(--space-4) 12vh;   /* true centre reads as low; sit a little above it */
}

/* The wordmark: the ★ in its gold and the title serif, as on the Highlights page. */
.consent-brand {
  display: flex;
  align-items: baseline;   /* the ★ sits on the text baseline like a letter */
  justify-content: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  font: var(--type-serif-title);
  letter-spacing: -0.01em;
}

/* Sized from the serif's cap height, so its points sit on the baseline and it rises just past the caps. */
.consent-brand .type-icon { height: 1.2cap; width: auto; }

.consent-card {
  padding: var(--space-3);
  background: var(--surface);
  border-radius: calc(var(--radius-control) + var(--space-3));   /* concentric with the controls inside */
  box-shadow: var(--shadow-card);
}

.consent-title { font: var(--type-headline); font-size: 17px; letter-spacing: -0.01em; margin: 0 0 4px; text-wrap: balance; }
.consent-hint { font: var(--type-callout); color: var(--muted); margin: 0 0 var(--space-2); text-wrap: pretty; }
.consent-card .label { margin-top: 4px; }

.consent-list {
  display: grid;
  gap: 12px;
  margin: 0 0 var(--space-1);
  padding: 0;
  list-style: none;
  font: var(--type-callout);
}

.consent-list li { display: flex; gap: 12px; align-items: flex-start; }
.consent-list svg { width: 18px; height: 18px; color: var(--muted); }
.consent-list strong { font-weight: 600; }
.consent-limit { color: var(--muted); }

.consent-details {
  display: grid;
  gap: 4px;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 0.5px solid var(--separator);
  font: var(--type-footnote);
}

.consent-details div { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-1); }
.consent-details dt { color: var(--muted); }
.consent-details dd { margin: 0; overflow-wrap: anywhere; }

.consent-footnote { margin: 12px 0 0; font: var(--type-footnote); color: var(--muted); text-wrap: pretty; }