/* ==========================================================================
   Privacy Policy (/privacy-policy)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the "Last updated" line, the two-column layout (the contents list beside the policy on desktop,
   above it on phones), the contents list itself, the policy's card and the parts of the policy the shared prose styles
   don't cover (paragraphs inside list items, the h5 headings, the Google and Microsoft scope lists). Every class starts
   with prv-. Views/Public/Privacy.cshtml links it in its FinalHeader section with a ?v= cache buster from
   StaticAssetVersion; Scripts/privacy-policy/privacy-policy.js only opens the contents list on desktop.
   Nothing here may hide or re-case the policy's text (a test checks it): it is a legal document.
   ========================================================================== */

/* ---------- Header: the date the policy last changed ---------- */
.prv-updated { display: flex; align-items: center; gap: 8px; }
.prv-updated i { font-size: 1.3rem; color: var(--tc-yellow); }

/* ---------- Layout: contents list and policy ---------- */
.prv-layout { display: grid; gap: 22px; }
.prv-main { min-width: 0; }
@media (min-width: 992px) {
  .prv-layout { grid-template-columns: 260px minmax(0, 52rem); gap: 36px; align-items: start; }
  .prv-toc { position: sticky; top: 100px; }
}
@media (min-width: 1200px) { .prv-layout { grid-template-columns: 290px minmax(0, 52rem); gap: 48px; } }

/* ---------- The contents list: an outlined card with a plus/minus button, as the FAQ cards have ---------- */
.prv-toc__box { background: #fff; border: 3px solid var(--tc-ink); border-radius: 20px; box-shadow: 0 4px 0 var(--tc-ink); }
.prv-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 14px 10px 18px; border-radius: 17px; cursor: pointer; list-style: none; }
.prv-toc__head::-webkit-details-marker { display: none; }
.prv-toc__head::marker { content: ""; }
.prv-toc__box[open] .prv-toc__head { border-bottom: 2px solid var(--tc-line); border-radius: 17px 17px 0 0; }
.prv-toc__label { font: 700 .875rem/1.2 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-ink); }
.prv-toc__icon { flex: none; position: relative; width: 30px; height: 30px; border: 2px solid var(--tc-ink); border-radius: 50%; background: var(--tc-yellow); transition: background-color .2s ease; }
.prv-toc__icon::before, .prv-toc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 3px; margin: -1.5px 0 0 -6px; background: var(--tc-ink); border-radius: 2px; }
.prv-toc__icon::after { transform: rotate(90deg); transition: transform .25s ease; }
.prv-toc__box[open] .prv-toc__icon { background: var(--tc-green); }
.prv-toc__box[open] .prv-toc__icon::after { transform: rotate(0); }
.prv-toc__head:hover .prv-toc__icon { background: #FFD776; }
.prv-toc__box[open] .prv-toc__head:hover .prv-toc__icon { background: #6BD99C; }
.prv-toc__list { display: grid; gap: 2px; padding: 10px 10px 12px; }
.prv-toc__sub { display: grid; gap: 1px; margin: 2px 0 6px 12px; padding-left: 8px; border-left: 2px solid var(--tc-line); }
.prv-toc__link { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; font: 600 .9375rem/1.3 var(--tc-display); color: var(--tc-ink); text-decoration: none; }
.prv-toc__link--sub { font: 500 .875rem/1.35 var(--tc-body); color: var(--tc-ink-2); }
.prv-toc__link:hover, .prv-toc__link:focus { color: var(--tc-ink); text-decoration: none; background: var(--tc-butter); }
/* Inside the scrolling list the base ring would be clipped: drawn inside the link instead */
.tc-root .prv-toc__link:focus-visible { outline: 3px solid var(--tc-ink); outline-offset: -3px; box-shadow: none; background: var(--tc-butter); }
@media (min-width: 992px) {
  /* Beside the policy, the list scrolls inside the card when the window is short. No overscroll-behavior: the wheel
     and the keyboard (Space, PageDown after a click on a contents link) must carry on to the page. */
  .prv-toc__list { max-height: calc(100vh - 186px); overflow-y: auto; scrollbar-width: thin; }
}
/* With a mouse the rows can be tighter; touch screens keep 44px rows */
@media (min-width: 992px) and (pointer: fine) { .prv-toc__link { min-height: 0; padding: 5px 10px; } }

/* ---------- The policy: one white card holding the text in a reading column ---------- */
.prv-card { padding: 26px 20px 30px; }
@media (max-width: 399.98px) { .prv-card { padding: 22px 16px 26px; } }
@media (min-width: 768px) { .prv-card { padding: 40px 44px 44px; } }
.prv-prose { overflow-wrap: break-word; }
@media (max-width: 575.98px) { .prv-prose { font-size: 1rem; } }
.prv-prose > p, .prv-prose > ul { max-width: 46rem; }
/* Each top-level section starts under a dashed rule */
.tc-root .prv-prose h2:not(:first-child) { margin-top: 1.25em; padding-top: .9em; border-top: 2px dashed rgba(47, 42, 79, .22); }
/* Google and Microsoft: the integrations' own headings, as small outlined labels */
.tc-root .prv-prose h5 { width: fit-content; margin: 1.5em 0 .7em; padding: 4px 14px 3px; border: 2px solid var(--tc-ink); border-radius: 999px; background: var(--tc-sky-2); box-shadow: 0 3px 0 var(--tc-ink); font: 700 1.0625rem/1.3 var(--tc-display); color: var(--tc-ink); }
/* Paragraphs inside list items (definitions, cookies, contact): no paragraph gap inside the item */
.prv-prose li > p { margin: 0; }
.prv-prose li > p + p { margin-top: .35em; }
/* The scope lists: each scope's name (an identifier, in a monospace face) with its description under it. The
   descriptions are <p> siblings of the items, as on the old page. */
.prv-scopes { display: grid; gap: 4px; max-width: 46rem; margin: 0 0 1.1em; padding: 16px 18px; border: 2px solid var(--tc-line); border-radius: 16px; background: var(--tc-sky-0); }
.prv-scopes > li { position: relative; margin-top: 10px; padding-left: 22px; color: var(--tc-ink); }
.prv-scopes > li:first-child { margin-top: 0; }
.prv-scopes > li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--tc-coral); border: 2px solid var(--tc-ink); }
.prv-scopes > li strong { font-family: var(--tc-mono); font-size: .9375rem; overflow-wrap: anywhere; }
.prv-scopes > p { margin: 0; padding-left: 22px; }
@media (max-width: 575.98px) {
  .prv-scopes { padding: 12px 12px 14px; }
  .prv-scopes > li, .prv-scopes > p { padding-left: 18px; }
  .prv-scopes > li::before { left: 1px; }
  .prv-scopes > li strong { font-size: .875rem; }
}

/* ---------- Related legal pages ---------- */
.prv-related { margin-top: 32px; }

/* ---------- Print: the policy alone ---------- */
@media print {
  .prv-toc, .prv-related { display: none; }
  .prv-layout { display: block; }
  .prv-card { padding: 0; border: 0; box-shadow: none; }
}