/* Help: the questions page. A plain hero with a search and the most asked questions, then the questions
   in groups beside a list of topics. Each group carries the hours of the day it belongs to, as the inner
   pages do; data and the app itself belong to the whole day. */

.help [hidden], .help-hero [hidden] { display: none !important; }

/* ── Hero: the headline and lede beside the search and the most asked questions ── */
.page-hero.plain.help-hero .wrap {
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 40px 72px;
  align-items: end;
}
.help-hero .lede { max-width: 31em; }

.find { margin-top: 32px; max-width: 520px; display: grid; gap: 8px; }
.find label { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.find-box { position: relative; }
.find-box svg { position: absolute; left: 17px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.find input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  font: 500 17px var(--body);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 20px 13px 48px;
  box-shadow: 0 22px 44px -36px rgba(36, 33, 28, 0.55);
}
.find input::placeholder { color: var(--muted); opacity: 0.8; }
.find input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--gold); }
.find-count { font-size: 14px; color: var(--muted); min-height: 1.5em; padding-left: 20px; }

/* The questions people ask most, as a small card */
.asked { background: var(--sheet); border: 1px solid var(--line); border-radius: 26px; padding: 22px 24px 8px; box-shadow: 0 30px 60px -44px rgba(36, 33, 28, 0.4); }
.asked h2.label { display: block; }
.asked ol { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: asked; }
.asked li { counter-increment: asked; }
.asked li + li { border-top: 1px solid var(--line); }
.asked a { display: grid; grid-template-columns: 26px minmax(0, 1fr) 10px; gap: 10px; align-items: baseline; padding: 13px 0 14px; text-decoration: none; font-weight: 500; line-height: 1.4; }
.asked a::before { content: counter(asked); font-family: var(--display); font-size: 14px; color: var(--brass); }
.asked a::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--gold); border-top: 1.5px solid var(--gold); transform: rotate(45deg) translateY(-2px); }
.asked a:hover { color: var(--brand); }

@media (max-width: 920px) {
  .page-hero.plain.help-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .asked { max-width: 560px; }
}

/* ── The page body: topics on the left, questions on the right ── */
.help { padding-bottom: 112px; }
.help .toc li { counter-increment: none; }
.help-body { min-width: 0; }
.help-group { scroll-margin-top: 96px; }
/* Space above each group that has a shown group before it, so a filtered list starts at the top */
.help-group:not([hidden]) ~ .help-group { margin-top: 88px; }
.group-head { max-width: 760px; margin-bottom: 26px; }
.group-head h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; margin-top: 14px; scroll-margin-top: 96px; }
.group-head > p { margin-top: 12px; font-size: 17.5px; color: var(--muted); max-width: 36em; }

/* Questions: every one draws its own top rule, so a filtered list still reads as ruled */
.help .faq details { border-top: 1px solid var(--line); margin-top: -1px; scroll-margin-top: 96px; }
.help .faq summary { line-height: 1.4; }
.help .faq summary:hover { color: var(--brand); }
.help .faq summary:focus-visible { outline-offset: 4px; }
.help .faq details > div { max-width: 46em; }
.help .faq details > div strong { color: var(--ink); font-weight: 600; }
.help .faq details > div a { color: var(--ink); }
.help .faq details > div a:hover { color: var(--brand); }
.help .faq .points { margin-top: 0; }
.help .faq .points li { color: var(--muted); }
.help .faq .points li b { color: var(--ink); }
.help .faq .steps { margin-top: 2px; }
.help .faq .steps small { margin-top: 4px; }

.help-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.help-steps li > span { color: var(--muted); }
.help-steps li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.help-steps li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--sheet); margin-top: 1px; }

/* The extra step for each phone maker, as ruled rows */
.help .makers-rows { margin: 4px 0; }
.help .makers-rows > li { grid-template-columns: 170px minmax(0, 1fr); padding: 13px 0; }
.help .makers-rows > li > b:first-child { font-size: 13px; }
.help .makers-rows > li p { font-size: 15.5px; }
@media (max-width: 560px) { .help .makers-rows > li { grid-template-columns: minmax(0, 1fr); } }

/* The tajweed key, with the app's own colours (src/lib/tajweed.ts, light theme) and their names */
.tj-key { list-style: none; margin: 2px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; max-width: 520px; }
.tj-key li { display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 16px; }
.tj-key i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 20%, transparent); }
.tj-key small { font-size: 13px; color: var(--muted); margin-left: 4px; }
@media (max-width: 480px) { .tj-key { grid-template-columns: minmax(0, 1fr); } }

/* ── The reminder check, answered in full beside the real screen ── */
.check-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 32px 44px;
  align-items: center;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 30px 32px;
  margin-bottom: 30px;
  box-shadow: 0 30px 60px -44px rgba(36, 33, 28, 0.4);
  scroll-margin-top: 96px;
  --c: var(--fajr);
}
.check-card h3 { font-family: var(--body); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: 0; }
.check-card > div > p { margin-top: 12px; color: var(--muted); }
.check-card > div > p strong { color: var(--ink); font-weight: 600; }
.checks { list-style: none; margin: 18px 0 6px; padding: 0; border-top: 1px solid var(--ink); }
.checks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 11px 0 12px; border-bottom: 1px solid var(--line); }
.checks b { font-weight: 600; }
.checks .os { grid-column: 2; grid-row: 1; align-self: start; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.checks .what { grid-column: 1 / -1; font-size: 15px; color: var(--muted); }
.makers { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.makers li { font-size: 14px; font-weight: 500; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 12px; }
.check-card .window { align-self: start; padding-top: 6px; }
.check-card .window .device { width: min(100%, 220px); }
.check-card .window figcaption { max-width: 200px; }
@media (max-width: 1040px) and (min-width: 921px) { .check-card { grid-template-columns: minmax(0, 1fr) 180px; gap: 28px 32px; } }
@media (max-width: 760px) {
  .check-card { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; border-radius: 22px; }
  .check-card .window { padding-top: 0; }
  .check-card .window .device { width: min(100%, 240px); }
}

/* A link on to the full page for each group, dotted in that page's colour */
.group-more { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.group-more a { display: inline-flex; align-items: center; gap: 11px; padding: 9px 18px 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); text-decoration: none; font-size: 15px; font-weight: 500; transition: border-color 0.2s; }
.group-more a::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.group-more a::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid var(--muted); border-top: 1.5px solid var(--muted); transform: rotate(45deg); }
.group-more a:hover { border-color: var(--gold); }

.find-empty { font-size: 17px; color: var(--muted); padding: 22px 24px; border: 1px dashed var(--line); border-radius: 18px; margin-bottom: 40px; }

.help-contact { border-top: 1px solid var(--ink); padding-top: 40px; }
.help-contact .note { max-width: 40em; }

/* On a phone the topics become a row of chips above the questions */
@media (max-width: 920px) {
  .help .toc ol { display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .help .toc a { margin-left: 0; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--ink); font-size: 14px; }
  .help .toc a:hover { border-color: var(--gold); }
  .help-group:not([hidden]) ~ .help-group { margin-top: 72px; }
}
@media (max-width: 560px) {
  .help .faq summary { font-size: 17.5px; padding: 19px 0; }
  .help-contact { padding-top: 32px; }
}