/* The privacy window (web/privacy.js), in the sign-in window's look (styles.css .signin): a card on the page's paper,
   EB Garamond for what it says, Schibsted Grotesk for how it works. Self-contained, because links.html loads no
   styles.css: the colours below are styles.css's own tokens (--card, --card-edge, --ink, --muted, --green…, light and
   dark), copied, so the window looks the same on every page, whatever that page's palette. Fixed over the page and
   never in its flow, so nothing under it moves. A centred card from 641 px; under that a sheet from the bottom, its
   buttons full width and every target at least 44 px, clear of the phone's safe areas. */
.pcw {
  --pcw-card: #fbf8f1; --pcw-card-2: #f5f0e5; --pcw-edge: #e3dccd; --pcw-ink: #1b1a16; --pcw-ink-2: #3a372f; --pcw-muted: #6d675a;
  --pcw-field-edge: #a69c86; --pcw-green: #2f6b4f; --pcw-green-2: #3f8a67; --pcw-red: #a9432c; --pcw-hover: rgba(27, 26, 22, .05);
  --pcw-serif: "EB Garamond", "Iowan Old Style", Georgia, serif; --pcw-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pcw-ease: cubic-bezier(.22, .61, .21, 1);
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color: var(--pcw-ink); font: 400 15px/1.5 var(--pcw-sans); text-align: left; -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .pcw {
  --pcw-card: #1c1b15; --pcw-card-2: #23221b; --pcw-edge: #34322a; --pcw-ink: #ece6d6; --pcw-ink-2: #cdc6b5; --pcw-muted: #9d9686;
  --pcw-field-edge: #5f5a4c; --pcw-green: #7fbf98; --pcw-green-2: #95d0ab; --pcw-red: #e0876d; --pcw-hover: rgba(236, 230, 214, .06);
}
.pcw *, .pcw *::before, .pcw *::after { box-sizing: border-box; }
.pcw [hidden] { display: none !important; }
.pcw p, .pcw h2, .pcw h3, .pcw dl, .pcw dd, .pcw ul, .pcw header { margin: 0; text-align: left; letter-spacing: normal; }
.pcw-scrim { position: absolute; inset: 0; background: rgba(15, 20, 17, .5); animation: pcw-fade .2s var(--pcw-ease); }
.pcw-card {
  position: relative; display: flex; flex-direction: column; width: min(720px, 100%); max-height: min(820px, 100%);
  background: var(--pcw-card); border: 1px solid var(--pcw-edge); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); animation: pcw-in .22s var(--pcw-ease);
}
.pcw a { color: var(--pcw-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pcw a:hover { color: var(--pcw-ink); }
.pcw :focus-visible { outline: 2px solid var(--pcw-green); outline-offset: 2px; }
.pcw .pcw-card:focus, .pcw .pcw-card:focus-visible, .pcw .pcw-m-t:focus { outline: none; } /* focused by the script, to be read out */

/* the head: the mark and the kicker on one line, then the title and what the window is for */
.pcw-head { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 26px 64px 18px 30px; border-bottom: 1px solid var(--pcw-edge); }
.pcw-mark { display: block; width: 26px; height: 26px; }
.pcw-mark svg { display: block; width: 100%; height: 100%; }
.pcw-mark .g { fill: var(--pcw-green); } .pcw-mark .r { fill: var(--pcw-red); } .pcw-mark .i { fill: var(--pcw-ink); }
.pcw-kick { font-size: 14px; color: var(--pcw-green); }
.pcw-kick i { font-family: var(--pcw-serif); font-size: 16px; }
.pcw-title { grid-column: 1 / -1; margin-top: 12px; font: 500 32px/1.08 var(--pcw-serif); letter-spacing: -.01em; color: var(--pcw-ink); }
.pcw-title em { font-style: italic; color: var(--pcw-green); }
.pcw-lede { grid-column: 1 / -1; margin-top: 8px; max-width: 58ch; font-size: 15px; color: var(--pcw-muted); }
.pcw-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--pcw-muted); font: 400 24px/1 var(--pcw-sans); cursor: pointer; }
.pcw-x:hover { background: var(--pcw-hover); color: var(--pcw-ink); }

/* the body scrolls on its own; the head and the buttons stay */
.pcw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 30px 18px; }
.pcw-data { display: grid; }
.pcw-item { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 4px 22px; padding: 14px 0; border-top: 1px solid var(--pcw-edge); }
.pcw-item:first-child { border-top: 0; }
.pcw-item dt { font: 500 18px/1.3 var(--pcw-serif); color: var(--pcw-ink); }
.pcw-item dd p { font-size: 14.5px; line-height: 1.55; color: var(--pcw-ink-2); }
.pcw-item dd .pcw-who { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--pcw-ink-2); }
.pcw-who span { color: var(--pcw-muted); }
.pcw-more { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pcw-edge); font-size: 13.5px; color: var(--pcw-muted); }
.pcw-more a { overflow-wrap: anywhere; }

/* Manage choices: one row per category, its control at the right */
.pcw-m-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 16px; }
.pcw-m-t { font: 500 22px/1.2 var(--pcw-serif); color: var(--pcw-ink); }
.pcw-back { min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--pcw-green); font: 500 14px/1 var(--pcw-sans); cursor: pointer; white-space: nowrap; }
.pcw-back:hover { color: var(--pcw-ink); }
.pcw-m-lede { margin-top: 2px; font-size: 14px; color: var(--pcw-muted); }
.pcw-cats { list-style: none; padding: 0; margin-top: 10px; }
.pcw-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid var(--pcw-edge); }
.pcw-c-name { font: 500 17px/1.3 var(--pcw-serif); color: var(--pcw-ink); }
.pcw-c-text { margin-top: 2px; font-size: 14px; color: var(--pcw-ink-2); }
.pcw-state { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--pcw-muted); white-space: nowrap; }
.pcw-state.on { color: var(--pcw-green); }
.pcw-sw { position: relative; flex: none; width: 42px; height: 24px; padding: 0; border: 1px solid var(--pcw-field-edge); border-radius: 999px; background: var(--pcw-card-2); cursor: pointer; transition: background .2s, border-color .2s; }
button.pcw-sw::before { content: ""; position: absolute; inset: -11px -6px; } /* a 44 px target around the switch */
.pcw-sw i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--pcw-ink-2); transition: transform .2s var(--pcw-ease), background .2s; }
.pcw-sw[aria-checked="true"], .pcw-sw.on { background: var(--pcw-green); border-color: var(--pcw-green); }
.pcw-sw[aria-checked="true"] i, .pcw-sw.on i { transform: translateX(18px); background: var(--pcw-card); }
span.pcw-sw { opacity: .75; cursor: default; }

/* the answers: Accept all and Reject non-essential look the same, side by side */
.pcw-foot { display: flex; align-items: center; gap: 10px; padding: 16px 30px; border-top: 1px solid var(--pcw-edge); background: var(--pcw-card-2); }
.pcw-gap { flex: 1 1 auto; }
.pcw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; border: 1px solid var(--pcw-ink); border-radius: 999px; background: var(--pcw-ink); color: var(--pcw-card); font: 600 15px/1.1 var(--pcw-sans); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.pcw-btn:hover { background: var(--pcw-green); border-color: var(--pcw-green); color: var(--pcw-card); }
.pcw-btn.pcw-ghost { background: transparent; color: var(--pcw-ink); border-color: var(--pcw-field-edge); }
.pcw-btn.pcw-ghost:hover { background: var(--pcw-hover); border-color: var(--pcw-ink); color: var(--pcw-ink); }
.pcw-btn.pcw-save { background: var(--pcw-green); border-color: var(--pcw-green); color: var(--pcw-card); }
.pcw-btn.pcw-save:hover { background: var(--pcw-green-2); border-color: var(--pcw-green-2); color: var(--pcw-card); }

@keyframes pcw-fade { from { opacity: 0; } }
@keyframes pcw-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pcw-scrim, .pcw-card { animation: none; } .pcw-sw, .pcw-sw i, .pcw-btn { transition: none; } }

/* tablets in portrait and small laptops: the same card, a little tighter */
@media (max-width: 820px) {
  .pcw-item { grid-template-columns: 140px minmax(0, 1fr); gap: 4px 16px; }
}
/* phones: a sheet from the bottom that leaves the page's top in sight, scrolling whole (its head with it) under its
   answers, which stay pinned at its foot, stacked full width (Reject and Accept first, alike) */
@media (max-width: 640px) {
  .pcw { place-items: end stretch; padding: max(10px, env(safe-area-inset-top)) 0 0; }
  .pcw-card { width: 100%; max-height: 92%; border-radius: 20px 20px 0 0; border-bottom: 0; overflow-y: auto; overscroll-behavior: contain; animation-name: pcw-up; }
  .pcw-body { flex: none; overflow: visible; }
  .pcw-foot { position: sticky; bottom: 0; }
  .pcw-head { padding: 20px 60px 14px max(18px, env(safe-area-inset-left)); }
  .pcw-title { margin-top: 10px; font-size: 27px; }
  .pcw-lede { font-size: 14.5px; }
  .pcw-x { top: 10px; right: max(10px, env(safe-area-inset-right)); }
  .pcw-body { padding: 2px max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left)); }
  .pcw-item { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
  .pcw-item dt { font-size: 17px; }
  .pcw-cat { gap: 14px; }
  .pcw-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .pcw-gap { display: none; }
  .pcw-btn { width: 100%; white-space: normal; }
  .pcw-btn.pcw-ghost, .pcw-btn.pcw-save { order: 3; }
}
@keyframes pcw-up { from { transform: translateY(24px); opacity: .4; } }
/* a short screen (a phone held sideways): the whole card scrolls, its buttons pinned at its foot */
@media (max-height: 560px) {
  .pcw { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .pcw-card { overflow-y: auto; overscroll-behavior: contain; }
  .pcw-body { flex: none; overflow: visible; }
  .pcw-foot { position: sticky; bottom: 0; }
  .pcw-title { font-size: 25px; }
}
@media (max-height: 560px) and (min-width: 641px) {
  .pcw-foot { padding-top: 10px; padding-bottom: 10px; }
}