/*
 * pillo.center support and account deletion (support.html, delete-account.html): the layout that only these
 * two pages have. Linked after /site.css, which holds everything shared (the page head, callouts, the mail
 * card and its copy button, chips, cards, icon wells).
 * Source: docs/design/2026-10-01-blister-2-site-mockups.html, #support and #delete.
 *
 * THE TEXT IS UNTOUCHED. Both pages are published store requirements (Google Play asks for a data-deletion
 * page that names the steps, the data deleted and the data kept), so every sentence, step and link is
 * exactly what it was and SiteCopyTests compares the visible text with the text before the redesign. The
 * mockup's shortened wording (the path «Ще > Мої дані» as chips, one list item as a sample) is reached with
 * styling on the full text, not by cutting it.
 *
 * DOM ORDER IS THE OLD ORDER. On /support the amber «not medical help» note was the first thing on the page
 * and still is on a phone; from 56.25 em it sits to the right of the contact block, as drawn, by grid
 * placement. Breakpoints are in em (see site.css).
 */

/* ============================== the page ============================== */

.help {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.4vw, 36px);
}
.help > * {
  margin: 0;
  min-width: 0;
}
.help-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.help-section > * {
  margin: 0;
}
.help-section ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 1.4rem;
}
.help-section li::marker {
  color: var(--muted);
}
.help .card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 24px);
}
.help .card > * {
  margin: 0;
}

/* Two blocks side by side from 56.25 em (900 px), one above the other below. Each keeps the height of its own
   text: the second method (the e-mail request and its two rules) is three times the length of the first, and a
   card stretched to match would be a void. (The mockup stretches them, drawn with shorter text.) */
.help-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 28px);
  align-items: start;
}
.help-two > * {
  min-width: 0;
}
@media (min-width: 56.25em) {
  .help-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================== support: contact and the note ============================== */

.help-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.help-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.help-contact > * {
  margin: 0;
}
/* The emergency number in the amber «not medical help» note is set larger than the sentence around it, as the
   mockup draws it (16 px beside 12.5 px: about 1.28 times). 1.25em is 20 px in the note's 16 px text, and it
   follows the reader's text size like everything else. `line-height: 1` keeps it from growing the line. */
.help-warn .num {
  font-size: 1.25em;
  line-height: 1;
}
@media (min-width: 56.25em) {
  .help-top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 28px;
  }
  .help-contact {
    grid-column: 1;
    grid-row: 1;
  }
  .help-warn {
    grid-column: 2;
    grid-row: 1;
  }
}

/* «What to write»: the four things as ticked wells, the mark a taken dose has in the app. */
.ticks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ticks .w {
  margin-top: 2px;
}
.ticks li > span:last-child {
  min-width: 0;
}
@media (min-width: 40em) {
  .ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================== support: the questions ============================== */

/* Native <details>: they open and close with no script, and a closed answer is still found by the
   browser's own find-in-page. */
.faq {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.faq details + details {
  border-top: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 20px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  background: var(--well);
}
/* The question is a heading inside its summary, so the outline of the page is what it was. */
.faq summary h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
.faq .chev {
  flex: none;
  color: var(--muted);
  transition: transform .15s ease;
}
.faq details:not([open]) .chev {
  transform: rotate(-90deg);
}
.faq-ans {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px 20px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}
.faq-ans > * {
  margin: 0;
}
.faq-ans strong {
  color: var(--ink);
}
.faq-ans ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 1.4rem;
}
.faq-ans li::marker {
  color: var(--muted);
}
.faq-ans > :first-child {
  margin-top: -2px;
}

/* ============================== delete-account ============================== */

.help-card h2 .chip {
  vertical-align: .1em;
}

/* The three steps. Each step's strong text is the thing to tap, drawn as the mockup's path chip; the last
   one, the destructive tap, is red. The numbers are generated (the old list was numbered by the browser). */
.steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1;
}
.steps li > div {
  padding-top: 5px;
  line-height: 1.6;
}
.steps strong {
  display: inline-block;
  padding: 1px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--well);
  color: var(--ink);
  font-weight: 700;
}
.steps li:last-child strong {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

/* «Спосіб 2»: the address to write to, with its copy button, and the two rules that make the request count. */
.contact {
  container-type: inline-size;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.contact dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
}
.contact dt {
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.contact dd {
  margin: 0 0 10px;
}
.contact dd:last-child {
  margin-bottom: 0;
}
.contact dd.to {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.contact dd.to a {
  color: inherit;
  text-decoration-thickness: 1px;
}
/* Label beside value only where the card is wide enough (a single-column page); in one of two side-by-side
   cards the long last answer would be squeezed into a third of the card, so there the label is above it. */
@container (min-width: 36rem) {
  .contact dl {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 10px 20px;
  }
  .contact dd {
    margin-bottom: 0;
  }
}

/* What is deleted and what stays: one icon well per line, the same icon down each column. */
.lst {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lst li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  line-height: 1.6;
}
.lst .iw {
  margin-top: -2px;
}
.lst strong {
  color: var(--ink);
}