/* Help page: guide text, with flow diagrams built from plain HTML */
.help { overflow-wrap: anywhere; }
.help .l-en,
.help .l-ta { display: block; }
.help .l-sep { display: none !important; }
.help h1 .l-ta { font-size: 0.9em; }
[data-lang-mode="both"] .help h1 .l-ta { margin-top: 4px; font-size: 0.55em; font-weight: 400; color: var(--muted); }
.help p .l-ta,
.help li .l-ta { margin-top: 3px; }
[data-lang-mode="both"] .help p .l-ta,
[data-lang-mode="both"] .help li .l-ta { color: var(--muted); }

/* Contents */
.hcontents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.hcontents a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 14px; border: 1px solid rgba(var(--ink), 0.14); border-radius: 12px; font-size: 14.5px; line-height: 1.35; text-decoration: none; }
@media (hover: hover) {
  .hcontents a:hover { border-color: var(--fg); }
}

/* Sections */
.hsec { padding-top: 12px; scroll-margin-top: 8px; }
.cmain.help .hsec h2 { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(var(--ink), 0.12); font-size: 24px; line-height: 1.3; }
.cmain.help .hsec h3 { margin-top: 24px; font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.hsec > p { margin-top: 10px; line-height: 1.65; }
.hsec a { text-underline-offset: 3px; }

.hsteps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: step; }
.hsteps li { position: relative; padding: 9px 0 9px 40px; line-height: 1.6; counter-increment: step; }
.hsteps li::before {
  content: counter(step);
  position: absolute;
  top: 9px;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(var(--ink), 0.3);
  border-radius: 50%;
  font-size: 13px;
}
.hlist { margin: 10px 0 0; padding-left: 20px; }
.hlist li { padding: 5px 0; line-height: 1.6; }

/* Flow diagrams: top to bottom on phones, left to right where there is room */
.hflow { margin: 18px 0 0; padding: 18px 14px; border: 1px solid rgba(var(--ink), 0.14); border-radius: 16px; background: var(--card); }
.hflow__title { margin-bottom: 12px; font-size: 13px; line-height: 1.45; text-align: center; color: var(--muted); }
.hflow__row { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.hnode { padding: 10px 12px; border: 1px solid rgba(var(--ink), 0.3); border-radius: 12px; background: var(--bg); font-size: 14px; line-height: 1.4; text-align: center; }
.hnode--end { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.hnode--end .l-ta { color: inherit !important; }
.hnode--ask { border-style: dashed; }
.hflow__row > li + li { position: relative; margin-top: 26px; }
.hflow__row > li + li::before { content: "↓"; position: absolute; top: -24px; left: 0; right: 0; font-size: 15px; line-height: 22px; text-align: center; color: var(--muted); }
.hfork { display: grid; gap: 10px; margin-top: 26px; position: relative; }
.hfork::before { content: "↓"; position: absolute; top: -24px; left: 0; right: 0; font-size: 15px; line-height: 22px; text-align: center; color: var(--muted); }
.hfork__path { display: flex; flex-direction: column; padding: 10px; border: 1px solid rgba(var(--ink), 0.14); border-radius: 12px; }
.hfork__when { margin-bottom: 8px; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center; }
.hfork__path .hflow__row > li + li { margin-top: 24px; }

.hflow a { color: inherit; }

@media (min-width: 640px) {
  .hflow { padding: 22px 18px; }
  .hflow__row--wide { flex-direction: row; align-items: stretch; }
  .hflow__row--wide > li { display: flex; flex: 1 1 0; }
  .hflow__row--wide > li .hnode { display: flex; flex: 1; flex-direction: column; justify-content: center; }
  .hflow__row--wide > li + li { margin: 0 0 0 26px; }
  .hflow__row--wide > li + li::before { content: "→"; top: 50%; left: -26px; right: auto; width: 26px; transform: translateY(-50%); }
  .hfork { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
}