/* Privacy: a long read. The headline lines up with the reading column, the contents list sits in the
   margin beside it, the short version comes first on deep green, and two small tables carry the detail. */

/* The headline starts where the reading starts, so the page reads down one edge */
.policy-hero .wrap > div { max-width: 880px; }
@media (min-width: 921px) { .policy-hero .wrap > div { margin-left: 284px; } }
.policy-hero .lede { max-width: 36em; }
.policy-hero .updated { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); max-width: 40em; }
.policy-hero .updated time { color: var(--ink); font-weight: 500; }

/* The reading area, on the lighter sheet */
.policy { padding: 72px 0 112px; }
.policy .toc .label { display: block; }
.policy .toc a[aria-current='true'] { color: var(--ink); border-left-color: var(--brand); }

.prose > section { scroll-margin-top: 96px; }
.prose > section + section { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); }
.prose section > * + * { margin-top: 16px; }
.prose section > h3 { margin-top: 34px; }
.prose section > h2 + * { margin-top: 18px; }
.prose p.note { color: var(--ink); }
.prose section > .table-wrap { margin-top: 22px; }
.prose section > .table-wrap + * { margin-top: 22px; }

/* Lists in the text carry the same ring as the points elsewhere on the site */
.prose section > ul:not(.rows) { list-style: none; padding-left: 0; gap: 10px; }
.prose section > ul:not(.rows) > li { position: relative; padding-left: 26px; }
.prose section > ul:not(.rows) > li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--c, var(--brand)); box-sizing: border-box; }

/* The short version, first and on deep green */
.prose .short { background: var(--deep); color: var(--on-deep); border-radius: 26px; padding: 30px 32px 14px; box-shadow: 0 30px 60px -44px rgba(36, 33, 28, 0.6); }
.prose .short h2 { font-size: clamp(24px, 2.6vw, 30px); color: var(--on-deep); }
.prose .short ol { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; counter-reset: short; }
.prose .short li { position: relative; counter-increment: short; padding: 16px 0 18px 42px; border-top: 1px solid rgba(246, 241, 230, 0.16); font-size: 15.5px; line-height: 1.55; color: rgba(246, 241, 230, 0.8); }
.prose .short li::before { content: counter(short); position: absolute; left: 0; top: 15px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--sunrise); color: var(--sunrise); font: 400 13px/25px var(--display); text-align: center; box-sizing: border-box; }
.prose .short li b { display: block; color: var(--on-deep); font-weight: 600; margin-bottom: 2px; }

/* What is kept where: Yes and No are written out; the dot only repeats them */
.keeps th[scope='row'] { font-weight: 400; color: var(--ink); min-width: 13em; }
.keeps td { white-space: nowrap; width: 1%; }
.keeps td::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; box-sizing: border-box; }
.keeps td.yes { color: var(--ink); font-weight: 500; }
.keeps td.yes::before { background: var(--brand); }
.keeps td.no { color: var(--muted); }
.keeps td.no::before { border: 1.5px solid currentColor; opacity: 0.7; }
.prose table.data th[scope='row'] { font-weight: 500; }
.prose table.data.keeps th[scope='row'] { font-weight: 400; }

/* Addresses and names from the code */
.prose code { font: 500 0.86em/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.prose .url code { display: block; white-space: normal; overflow-wrap: anywhere; padding: 12px 16px; border-radius: 12px; font-size: 14px; }

/* Permissions as ruled rows, inside the reading column */
.prose .rows { padding-left: 0; display: block; }
.prose .rows > li { grid-template-columns: 160px minmax(0, 1fr); }
.prose .rows > li > b:first-child { color: var(--ink); }

@media (max-width: 920px) {
  .policy { padding: 40px 0 88px; }
  .policy .toc { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 18px; }
  .policy .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; border-left: 0; }
  .policy .toc a { padding-left: 0; margin-left: 0; border-left: 0; }
  .policy .toc a[aria-current='true'] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
}
@media (max-width: 640px) {
  .prose .short { padding: 24px 20px 8px; border-radius: 22px; }
  .prose .short ol { grid-template-columns: minmax(0, 1fr); }
  .prose table.data th, .prose table.data td { padding: 10px 12px; }
  .prose table.data caption { padding: 12px 12px 4px; }
  /* On a phone each row becomes a small card: what it is, then Phone, Backup and iCloud side by side.
     The table keeps its roles in the markup, so it still reads as a table. */
  .keeps, .keeps tbody, .keeps caption { display: block; }
  .keeps thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .keeps tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; padding: 14px 14px 13px; border-top: 1px solid var(--line); }
  .prose table.keeps th[scope='row'], .prose table.keeps td { display: block; border: 0; padding: 0; min-width: 0; }
  .keeps th[scope='row'] { grid-column: 1 / -1; margin-bottom: 9px; line-height: 1.45; }
  .keeps td { width: auto; font-size: 14.5px; }
  .keeps td.yes::before, .keeps td.no::before { content: attr(data-col); content: attr(data-col) / ''; display: block; width: auto; height: auto; margin: 0 0 1px; border: 0; border-radius: 0; background: none; opacity: 1; font: 400 10.5px/1.6 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  .keeps td.yes::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--brand); vertical-align: 1px; }
  .prose .rows > li { grid-template-columns: minmax(0, 1fr); }
  .prose > section + section { margin-top: 44px; padding-top: 36px; }
}
@media (max-width: 380px) { .policy .toc ol { grid-template-columns: minmax(0, 1fr); } }