/* ==========================================================================
   MMA Studios: reading layout for the legal pages (/privacy/, /delete-account/)
   Loads after site.css and reuses its tokens and sticker classes. The lid stays; the long text
   sits on a dark reading sheet that is taped down at two corners, under a white page label.
   Readability first: nothing decorative ever sits over text, and the text itself never tilts.

   Contents
     1. Tokens
     2. Page column and the draft note
     3. The page label (holds the h1)
     4. The reading sheet and its tape
     5. Prose: headings, lists, links, blanks
     6. Contents list (privacy)
     7. Tables (stack into cards on phones)
     8. Steps and call to action (delete account)
     9. Loose stickers on wide screens
    10. Forced colours, print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --doc: #1C1B21;            /* the reading sheet */
  --doc-hi: #26252C;         /* raised panels on the sheet: contents, table heads, steps */
  --on-doc: #ECEAF2;         /* body text: 14.3:1 on the sheet, 12.7:1 on raised panels */
  --on-doc-soft: #C4C1D0;    /* small labels: 9.7:1 on the sheet, 8.6:1 on raised panels */
  --doc-rule: #3A3843;
  --doc-link: #22C3B2;        /* teal links: 7.7:1 on the sheet, but only 6.9:1 on raised panels */
  --doc-link-raised: #3DD6C4; /* teal on raised panels (step cards, contents numbers): 8.4:1 */
  --doc-link-hover: #5EE0D1;  /* 10.6:1 on the sheet, 9.4:1 on raised panels */
  --doc-max: 800px;
  --overlap: clamp(22px, 18px + 1.2vw, 36px); /* how far the page label hangs over the sheet */
}

/* 2. Page column and the draft note -------------------------------------------------- */
.legal {
  padding-top: clamp(28px, 4vw, 52px);
}

/* A deep-pink warning sticker. Removed on publish day with the noindex tag. */
.draft {
  --r: -1deg;
  --cut: var(--cut-sm);
  width: min(100% - 8px, var(--doc-max) - 40px);
  margin: 0 auto clamp(30px, 4vw, 48px);
  padding: 12px 18px 11px;
  border-radius: 10px;
  background: var(--pink-deep);   /* white text: 9.9:1 */
  color: var(--paper);
  font-size: clamp(1rem, 0.975rem + .1vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}
.draft__tag {
  margin-right: .15em;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3em;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.doc {
  position: relative;
  width: 100%;
  max-width: var(--doc-max);
  margin-inline: auto;
}

/* 3. The page label -------------------------------------------------------------- */
.doc__label {
  --r: -2.5deg;
  --sheen: .18;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 20px);
  margin: 0 0 calc(-1 * var(--overlap)) clamp(4px, 2.4vw, 32px);
}
@media (min-width: 600px) {
  .doc__label { max-width: calc(100% - 110px); } /* stays clear of the top-right tape */
}
.doc__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 22px;
}
.doc__title {
  margin: 0;
  padding: clamp(12px, 10px + .6vw, 20px) clamp(16px, 13px + 1vw, 28px) clamp(12px, 10px + .6vw, 20px);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
}
.doc__big {
  display: block;
  font-size: clamp(1.8125rem, 1.5rem + 1.6vw, 2.875rem);
  letter-spacing: .01em;
  line-height: 1.02;
  text-wrap: balance;
  margin-bottom: -.06em; /* Luckiest Guy leaves empty descender room under its capitals */
}
.doc__sub {
  display: block;
  margin-top: .55em;
  color: var(--pink-deep);        /* 9.9:1 on white */
  font-family: var(--body);
  font-size: clamp(0.875rem, 0.8125rem + .3vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* 4. The reading sheet ----------------------------------------------------------- */
.doc__sheet {
  position: relative;
  padding:
    calc(var(--overlap) + clamp(22px, 18px + 1.2vw, 36px))
    clamp(18px, 5.2vw, 64px)
    clamp(52px, 44px + 2vw, 72px);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: clamp(12px, 10px + .6vw, 18px);
  background: var(--doc);
  color: var(--on-doc);
  box-shadow:
    0 clamp(14px, 12px + .6vw, 22px) clamp(26px, 22px + 1.2vw, 40px) rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* Masking tape holds the sheet down at the top-right and bottom-left corners. The sheet's
   padding keeps every line of text clear of it. */
.doc__tape {
  position: absolute;
  z-index: 1;
  width: clamp(80px, 72px + 2vw, 116px);
  height: clamp(24px, 22px + .5vw, 32px);
  transform: rotate(38deg);
  pointer-events: none;
}
.doc__tape--tr { top: -6px; right: calc(-.3 * clamp(80px, 72px + 2vw, 116px)); }
.doc__tape--bl { bottom: -6px; left: calc(-.3 * clamp(80px, 72px + 2vw, 116px)); }

/* 5. Prose ------------------------------------------------------------------------ */
.prose {
  font-size: clamp(1rem, 0.95rem + .25vw, 1.125rem);
  line-height: 1.68;
  overflow-wrap: break-word;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p,
.prose ul,
.prose ol { margin: 0 0 1em; }
.prose ul { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose ul > li::marker { color: var(--pink); }
.prose strong { color: var(--paper); font-weight: 600; }

.prose h2 {
  margin: 2.3em 0 .75em;
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1.3125rem, 1.1875rem + .6vw, 1.6875rem);
  font-weight: 700;
  line-height: 1.28;
}
.prose h3 {
  margin: 1.9em 0 .5em;
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1.125rem, 1.0625rem + .3vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.35;
}
.prose h2 + h3 { margin-top: 1em; }

/* Numbered headings (.prose--numbered) hang their number sticker in the margin. Inline flow,
   not flex: the space between the number and the words is really rendered, so screen readers
   hear "1. The short version" and not "1.The short version". */
.prose--numbered h2 {
  padding-left: 2.35em;
  text-indent: -2.35em;
}
.doc__num {
  display: inline-block;
  width: 2.1em;
  margin-right: .3em;
  padding: .3em 0 .16em;
  text-indent: 0;
  border-radius: 6px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-size: .86em;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  box-shadow: 0 0 0 3px var(--paper), var(--drop-sm);
  transform: rotate(-4deg);
}
.prose h2:nth-of-type(3n+2) .doc__num { background: var(--teal); transform: rotate(3deg); }
.prose h2:nth-of-type(3n) .doc__num { background: var(--gold); transform: rotate(-2deg); }
.doc__subnum { margin-right: .3em; color: var(--doc-link); }

.prose a {
  color: var(--doc-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere; /* long addresses and URLs break instead of widening the page */
}
.prose a:hover { color: var(--doc-link-hover); }
/* The public address is read and typed by hand, so it should not split at the "@". It needs no rule
   for that: with no <wbr> in it, the address has no break point, so it moves to the next line whole
   whenever it fits there. overflow-wrap above splits it only when it is wider than a whole line
   (a very narrow phone, or a large browser text size). Do not add white-space: nowrap here: it is
   blind to the text size, and at 125% or 150% text it pushed the address and the step cards off
   the page. */

.doc__updated {
  color: var(--on-doc-soft);
  font-size: .94em;
}
.doc__updated strong { color: inherit; font-weight: 600; }

/* A blank still to fill: a highlighter chip. The text keeps its square brackets, so a check
   that searches the built page for "[" finds every one of them. */
.blank {
  padding: .06em .38em;
  border-radius: 5px;
  background: var(--yellow);  /* ink text: 12.6:1 */
  color: var(--ink);
  font-size: .88em;
  font-weight: 600;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A callout for the one thing a reader must not miss */
.doc__warn {
  padding: 12px 16px;
  border-left: 4px solid var(--pink);
  border-radius: 0 10px 10px 0;
  background: rgba(242, 66, 126, .1);
}

/* 6. Contents list ----------------------------------------------------------------- */
.toc {
  margin: 1.6em 0 0;
  padding: 14px clamp(14px, 12px + .6vw, 22px) 8px;
  border-radius: 12px;
  background: var(--doc-hi);
}
.toc__title {
  margin: 0 0 2px;
  color: var(--on-doc-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc li { margin: 0; break-inside: avoid; }
.toc li + li { margin-top: 0; }
.toc a {
  display: block;
  min-height: 44px;
  padding: 10px 0 10px 1.9em;
  text-indent: -1.9em;
  border-bottom: 1px solid var(--doc-rule);
  color: var(--on-doc);
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
}
.toc li:last-child a { border-bottom: 0; }
.toc a:hover { color: var(--doc-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.toc__n {
  display: inline-block;
  min-width: 1.6em;
  text-indent: 0;
  color: var(--doc-link-raised);
  font-weight: 700;
}
@media (min-width: 640px) {
  /* A grid, not newspaper columns: both columns share row heights, so when one entry wraps
     its neighbour's rule stays level with it (columns: 2 made a staircase at 768px). */
  .toc ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: 32px;
  }
  .toc li { display: flex; }
  .toc li > a { flex: 1; }
  .toc li:last-child a { border-bottom: 1px solid var(--doc-rule); }
}

/* 7. Tables -------------------------------------------------------------------------
   Wide boxes: a plain table in a rounded box. Narrow boxes: every row becomes a small card, with
   each cell's column name printed above it. The switch is a container query in rem, so a reader
   with a large text size gets the cards on a wider screen too. The markup carries explicit table
   roles because some browsers drop table semantics once a table's display is changed. */
.table-box {
  container: doc-table / inline-size;
  margin: 0 0 1.2em;
  border: 1px solid var(--doc-rule);
  border-radius: 12px;
  overflow-x: auto; /* a last resort only: the cards below mean nothing should need it */
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: max(1rem, .94em);
  line-height: 1.5;
}
.doc-table caption { text-align: left; }
.doc-table th,
.doc-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--doc-rule);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word; /* not "anywhere": that shrinks a column until its words split mid-word */
}
.doc-table tbody tr:last-child > * { border-bottom: 0; }
.doc-table thead th {
  background: var(--doc-hi);
  color: var(--on-doc-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
}
.doc-table tbody th {
  color: var(--paper);
  font-weight: 600;
}
.doc-table--kv tbody th {
  width: 38%;
  background: var(--doc-hi);
}
.doc-table td::before { content: none; }
/* A stand-alone email is a 44px tap target at every width. In the table the negative margin gives
   the extra height back, so the rows keep their height (the cell's 12px padding holds it). */
.doc-table--kv td > a {
  display: inline-block;
  max-width: 100%; /* the inline-block stays inside its cell at any text size */
  padding-block: 11px;
  margin-block: -11px;
}

/* 30rem is 480px at the default text size: the box is that wide on a 596px screen */
@container doc-table (max-width: 30rem) {
  .doc-table,
  .doc-table tbody,
  .doc-table tr,
  .doc-table th,
  .doc-table td { display: block; }
  .doc-table thead {        /* kept for screen readers, hidden from view */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .doc-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--doc-rule);
  }
  .doc-table tbody tr:last-child { border-bottom: 0; }
  .doc-table th,
  .doc-table td {
    padding: 0;
    border: 0;
  }
  .doc-table tbody th { margin-bottom: 4px; }
  .doc-table td + td { margin-top: 8px; }
  .doc-table td::before {    /* the column name, shown above the value; silent for screen readers */
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    color: var(--on-doc-soft);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
  }
  .doc-table--kv tr { padding: 0; }
  .doc-table--kv tbody th {
    width: auto;
    margin: 0;
    padding: 8px 14px 6px;
    color: var(--on-doc-soft);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .doc-table--kv td { padding: 8px 14px 12px; }
  .doc-table--kv td > a { margin-block: 0; } /* in a card the tap target takes its own room */
}

/* 8. Steps and call to action ------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a long word can never make a card wider than the list */
  gap: 14px;
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.prose .steps li + li { margin-top: 0; }
.steps li {
  position: relative;
  counter-increment: step;
  min-height: 60px;
  padding: 13px 16px 13px 66px;
  border-radius: 12px;
  background: var(--doc-hi);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding-top: .12em;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.3125rem;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--paper), var(--drop-sm);
  transform: rotate(-6deg);
}
.steps li:nth-child(2)::before { background: var(--teal); transform: rotate(5deg); }
.steps li:nth-child(3)::before { background: var(--gold); transform: rotate(-3deg); }
.steps li:nth-child(4)::before { background: var(--pink); transform: rotate(7deg); } /* ink on pink: 5:1, large digit */
.steps a { color: var(--doc-link-raised); } /* the cards are raised panels; hover still wins through .prose a:hover */
@media (max-width: 379px) {
  .steps li { padding: 12px 12px 12px 56px; }
  .steps li::before { left: 0.6875rem; width: 2rem; height: 2rem; font-size: 1.1875rem; }
}

.doc__cta { margin: 1.6em 0 .7em; }
.doc__cta .btn-sticker {
  max-width: 100%;
  text-align: center;
  line-height: 1.3;
}
.prose .doc__cta a { color: var(--ink); text-decoration: none; overflow-wrap: normal; }
.prose .doc__cta a:hover { color: var(--ink); }
.doc__hint { color: var(--on-doc-soft); }

/* 9. Loose stickers on wide screens, on the empty lid either side of the sheet -------- */
.doc__deco { display: none; }
@media (min-width: 1200px) {
  .doc__deco {
    display: block;
    position: absolute;
    z-index: 0;
    width: 84px;
  }
  .doc__deco--l1 { --r: -12deg; right: calc(100% + clamp(48px, 8vw - 48px, 150px)); top: 120px; }
  .doc__deco--r1 { --r: 14deg; left: calc(100% + clamp(48px, 8vw - 48px, 150px)); top: 40px; width: 76px; }
  .doc__deco--l2 { --r: 8deg; right: calc(100% + clamp(64px, 9vw - 40px, 180px)); top: 46%; width: 72px; }
  .doc__deco--r2 { --r: -20deg; left: calc(100% + clamp(56px, 8vw - 36px, 160px)); top: 62%; width: 62px; }
}

/* 10. Forced colours, print ----------------------------------------------------------- */
@media (forced-colors: active) {
  .doc__sheet,
  .toc,
  .steps li { border: 1px solid CanvasText; }
  .blank { border: 1px solid CanvasText; }
  .doc__tape { display: none; }
}

@media print {
  .scuffs,
  .doc__sheet { background: #fff; }
  .doc__sheet,
  .prose,
  .prose strong,
  .prose h2,
  .prose h3 { color: #000; box-shadow: none; }
  .site-head,
  .site-foot,
  .skip,
  .doc__tape,
  .doc__deco { display: none; }
  .prose a { color: #000; }
}