@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-component="modal"][data-slot="overlay"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease;

  :root[data-theme="dark"] & {
    background-color: rgba(0, 0, 0, 0.7);
  }

  [data-slot="content"] {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-6);
    min-width: 400px;
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.2s ease;

    @media (max-width: 30rem) {
      min-width: 300px;
      padding: var(--space-4);
    }

    :root[data-theme="dark"] & {
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }

    /* Buttons are style/component/button.css, which names this dialog in its selector list. */
  }

  [data-slot="title"] {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
  }

  [data-slot="content"][data-variant="black"] {
    background-color: #000;
    border-color: var(--line);
    color: var(--ink);
    font-family: var(--font-mono);

    [data-slot="title"] {
      color: var(--ink);
      font-family: var(--font-mono);
    }
  }
}
/**
 * The Privacy Preference Center, and the "Cookies Settings" control that opens it.
 *
 * The dialog shell — the overlay, the panel, its border, radius and shadow — is component/modal.css
 * and is not redrawn here; this file only says what the preference centre needs on top of it: a
 * wider panel than a confirmation dialog, a heading that reads from the start rather than centred,
 * a body that scrolls when the categories are expanded while the two decisions stay pinned to the
 * bottom, and four rows built from a disclosure button and a switch.
 *
 * The switch is style/component/switch.css under its shared `[data-slot="toggle-label"]` hook, so
 * the control here is the same control as the one on the billing page rather than a second one
 * that happens to look similar. The buttons in the footer are style/component/button.css, which
 * already names the modal's content in its selector list.
 *
 * Colours are style/token/color.css. Logical properties throughout, because the legal pages are
 * read right-to-left in Arabic and a preference centre that puts its chevron on the wrong side is
 * the same bug as a document that does.
 */

/* ---------- the panel ---------- */

/*
 * A confirmation dialog is 400px wide; four expandable categories of running prose are not. The
 * override is keyed to this component so no other dialog widens with it.
 */
[data-component="modal"][data-slot="overlay"] [data-slot="content"]:has([data-component="cookie-consent"]) {
  inline-size: min(42rem, 90vw);
  max-block-size: min(46rem, 88vh);
  display: flex;
  flex-direction: column;
  padding: 0;
}

[data-component="modal"][data-slot="overlay"] [data-slot="content"]:has([data-component="cookie-consent"])
  [data-slot="title"] {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  text-align: start;
  border-block-end: 1px solid var(--color-border);
  font-size: var(--font-size-lg);
}

[data-component="cookie-consent"] {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  flex: 1;
  font-family: var(--font-sans);
  color: var(--color-text);
}

/* ---------- the scrolling body ---------- */

/*
 * One scroll region, not three. The intro, the heading and the categories scroll together, which
 * is what a reader expects from a dialog; giving each of them its own `overflow-y` produced two
 * scrollbars side by side and a heading stranded between them.
 */
[data-component="cookie-consent"] [data-slot="body"] {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-component="cookie-consent"] [data-slot="intro"],
[data-component="cookie-consent"] [data-slot="section-title"],
[data-component="cookie-consent"] [data-slot="categories"] {
  padding-inline: var(--space-6);
}

[data-component="cookie-consent"] [data-slot="intro"] {
  padding-block-start: var(--space-5);
}

[data-component="cookie-consent"] [data-slot="intro"] p {
  margin: 0 0 var(--space-3) 0;
  font-size: 0.875rem;
  line-height: 1.65;
}

[data-component="cookie-consent"] [data-slot="intro"] a {
  color: var(--color-text-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-component="cookie-consent"] [data-slot="section-title"] {
  margin: var(--space-2) 0 var(--space-3) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-strong);
}

/*
 * The categories are the part that grows, so they are the part that scrolls. The two decisions
 * below stay where the hand expects them however far the prose runs.
 */
[data-component="cookie-consent"] [data-slot="categories"] {
  padding-block-end: var(--space-4);
}

/* ---------- one category row ---------- */

[data-component="cookie-consent"] [data-slot="category"] {
  border-block-start: 1px solid var(--color-border);
}

[data-component="cookie-consent"] [data-slot="category"]:last-child {
  border-block-end: 1px solid var(--color-border);
}

[data-component="cookie-consent"] [data-slot="category-head"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-1);
}

/*
 * The disclosure is a row, not a button-shaped thing. modal.css lends every `<button>` inside a
 * dialog the product's button styling, which is right for the footer and wrong here, so this one
 * is taken back out of it by name.
 *
 * `justify-content` is part of what is taken back: the button rule centres its contents, and a
 * centred disclosure puts each row's chevron at a different place down the column, keyed to the
 * length of the label next to it. They belong on one vertical line.
 */
[data-component="modal"][data-slot="overlay"]
  [data-slot="content"]
  [data-component="cookie-consent"]
  button[data-slot="disclosure"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2-5);
  flex: 1;
  min-inline-size: 0;
  padding: var(--space-3) 0;
  border: none;
  border-radius: var(--border-radius-sm);
  background: none;
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

[data-component="modal"][data-slot="overlay"]
  [data-slot="content"]
  [data-component="cookie-consent"]
  button[data-slot="disclosure"]:hover {
  background: none;
  color: var(--color-text-strong);
}

[data-component="modal"][data-slot="overlay"]
  [data-slot="content"]
  [data-component="cookie-consent"]
  button[data-slot="disclosure"]:active {
  transform: none;
}

[data-component="modal"][data-slot="overlay"]
  [data-slot="content"]
  [data-component="cookie-consent"]
  button[data-slot="disclosure"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

[data-component="cookie-consent"] [data-slot="chevron"] {
  flex-shrink: 0;
  color: var(--color-icon);
  rotate: -90deg;
  transition: rotate 0.15s ease;
}

/* The chevron points into the row it will open: leftwards in a right-to-left reading. */
:root[dir="rtl"] [data-component="cookie-consent"] [data-slot="chevron"] {
  rotate: 90deg;
}

[data-component="cookie-consent"] [data-slot="category"][data-expanded] [data-slot="chevron"] {
  rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  [data-component="cookie-consent"] [data-slot="chevron"] {
    transition: none;
  }
}

[data-component="cookie-consent"] [data-slot="category-title"] {
  overflow-wrap: anywhere;
}

/*
 * "Always Active" occupies the column the switch would, so the four rows line up and the one row
 * that cannot be changed is visibly the one without a control rather than one with a dead control.
 */
[data-component="cookie-consent"] [data-slot="always-active"] {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-success);
  white-space: nowrap;
}

[data-component="cookie-consent"] [data-slot="category-body"] {
  padding-block: 0 var(--space-4);
  padding-inline-start: calc(8px + var(--space-2-5));
}

[data-component="cookie-consent"] [data-slot="category-body"] p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* ---------- the two decisions ---------- */

[data-component="cookie-consent"] [data-slot="actions"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-background-weak);
}

@media (max-width: 30rem) {
  [data-component="modal"][data-slot="overlay"] [data-slot="content"]:has([data-component="cookie-consent"])
    [data-slot="title"] {
    padding: var(--space-4);
  }

  [data-component="cookie-consent"] [data-slot="intro"],
  [data-component="cookie-consent"] [data-slot="section-title"],
  [data-component="cookie-consent"] [data-slot="categories"] {
    padding-inline: var(--space-4);
  }

  [data-component="cookie-consent"] [data-slot="actions"] {
    padding: var(--space-4);
  }

  /* Two decisions of equal weight, each wide enough to hit. */
  [data-component="modal"][data-slot="overlay"]
    [data-slot="content"]
    [data-component="cookie-consent"]
    [data-slot="actions"]
    button {
    flex: 1;
    min-inline-size: 9rem;
  }
}

/* ---------- the control on the page ---------- */

[data-component="cookie-settings"] {
  margin-block: var(--space-6);
}

[data-component="cookie-settings"] [data-slot="state"] {
  margin: var(--space-3) 0 0 0;
  font-size: 0.875rem;
  color: var(--color-text-weak);
}
/**
 * What the cookie policy needs on top of the shared legal document styles in `../document.css`.
 *
 * Three things, and nothing else.
 *
 * 1. The document names cookies and storage keys, so it renders `<code>`, which no other legal page
 *    does and which the site's stylesheets therefore never styled.
 * 2. Its tables are six columns wide and their last column is a duration written as prose.
 *    `document.css` keeps the last cell of a legal table on one line, because in the privacy
 *    policy's provider table that cell holds two links around a separator; here that rule would
 *    push "30 minutes by default, set by Cloudflare's challenge passage setting" out to the width
 *    of the sentence and leave the reader scrolling past four empty columns to reach it.
 * 3. The always-active marker on the Strictly Necessary heading.
 *
 * The preference centre itself is component/cookie-consent.css. It is a dialog portalled to the
 * body, outside this page's element, so nothing here reaches it.
 */

/* ---------- cookie and storage names in the prose and in the tables ---------- */

[data-document="cookie-policy"] code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border: 1px solid var(--color-border-weak);
  border-radius: var(--border-radius-xs);
  background: var(--color-background-weak);
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}

/* ---------- the tables ---------- */

/*
 * Taking back `white-space: nowrap` on the last cell. The selector matches the one in
 * `document.css` and adds this document, so it wins on specificity rather than on order.
 */
[data-page="legal"] [data-document="cookie-policy"] [data-component="legal-table"] td:last-child {
  white-space: normal;
}

/*
 * Six columns of prose need a floor under the name and under the description, or the browser
 * hands the widest sentence half the table and squeezes `aicippy.billing.pkceVerifier` into a
 * column one character wide.
 *
 * The floor goes on the cells, never on the table. `document.css` makes a legal table
 * `display: block; overflow-x: auto`, so the table element *is* the scroll container: a
 * `min-inline-size` there would widen the container itself and push the whole page sideways on a
 * phone instead of scrolling inside it. On the cells it widens the table box within that
 * container, which is the thing that is supposed to scroll.
 */
[data-page="legal"] [data-document="cookie-policy"] [data-component="legal-table"] :is(th, td):first-child {
  min-inline-size: 11rem;
}

[data-page="legal"] [data-document="cookie-policy"] [data-component="legal-table"] :is(th, td):nth-child(3) {
  min-inline-size: 18rem;
}

/* ---------- the always-active marker ---------- */

[data-document="cookie-policy"] h3 [data-slot="always"] {
  font-weight: 500;
  color: var(--color-text-success);
}

/* ---------- print ---------- */

@media print {
  /* The preference centre is a control; paper has none. */
  [data-component="cookie-settings"] {
    display: none !important;
  }

  [data-page="legal"] [data-document="cookie-policy"] [data-component="legal-table"] {
    display: table !important;
    overflow: visible !important;
    min-inline-size: 0 !important;
    width: 100% !important;
    border: 2pt solid black !important;
    font-size: 9pt;
  }

  [data-page="legal"] [data-document="cookie-policy"] [data-component="legal-table"] :is(th, td) {
    border: 1pt solid black !important;
    padding: 4pt 6pt !important;
    background: white !important;
    min-inline-size: 0 !important;
  }

  [data-page="legal"] [data-document="cookie-policy"] [data-component="legal-table"] th {
    background: #f0f0f0 !important;
    font-weight: bold;
    page-break-after: avoid;
  }

  [data-page="legal"] [data-document="cookie-policy"] [data-component="legal-table"] tr {
    page-break-inside: avoid;
  }

  [data-document="cookie-policy"] code {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
}