/* The help center (neatlywed.com/help): what its pages need beyond site.css, in site.css's own tokens and type.
   No color is written here: every one is a token in site.css's :root. Designed at 375 first, then 700 and 860.
   site/help/tools/build.py writes the pages; this file is written by hand. */

/* "Help" is a short word: as a link in the bar or the foot it is 32px wide, under the 44 a finger needs. The site's
   other links are long enough not to notice; until site.css gives every one this floor, the help pages do. */
.nav-links a, .foot-links a { min-width: 44px; justify-content: center; }

.h-page { padding: 26px 0 64px; }
.h-wrap { max-width: 760px; }
@media (min-width: 860px) {
  .h-page { padding: 48px 0 88px; }
  .h-wrap { max-width: 940px; }
}
/* site.css pads every section as a screen of its own; a help page's parts are not screens. */
.h-page section { padding: 0; }
.h-page h1 { margin-top: 12px; font-size: clamp(36px, 9.6vw, 56px); text-wrap: balance; }
.h-page h2 { font-size: clamp(27px, 6.4vw, 34px); text-wrap: balance; }
.h-lede { margin-top: 14px; font-size: 18px; max-width: 40em; }
/* A link inside words is underlined; a card that is a link is not. */
.h-steps p a, .h-note a, .h-points a, .h-lede a { text-decoration: underline; text-underline-offset: 2px; }
.h-page strong { font-weight: 600; color: var(--ink); }

.h-back { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 44px; margin: -8px 0 10px; font-size: 15px; font-weight: 600; color: var(--antique); }
.h-back .icon { width: 18px; height: 18px; }
.h-back:focus-visible, .h-card:focus-visible, .h-toc a:focus-visible, .h-clear:focus-visible { outline: 2px solid var(--antique); outline-offset: 3px; }

/* On this page. */
.h-toc { margin-top: 24px; padding: 12px 18px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.h-toc-title, .h-next-title { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--antique); }
.h-toc ol { margin: 4px 0 0; padding: 0 0 0 22px; }
.h-toc li { color: var(--muted); }
.h-toc a { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.h-toc li + li { border-top: 1px solid var(--line); }

/* An article's parts. */
.h-sec { margin-top: 44px; scroll-margin-top: calc(var(--bar) + 14px); }
.h-sec > p { margin-top: 12px; }
.h-steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: h-step; display: grid; gap: 22px; }
.h-steps > li { position: relative; padding-left: 46px; counter-increment: h-step; }
.h-steps > li::before {
  content: counter(h-step); position: absolute; left: 0; top: -3px;
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--dusty); background: var(--white);
  /* The sans, not the serif: Cormorant's old-style figures make a 1 read as an i in a circle this small. */
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1; color: var(--antique);
  font-variant-numeric: lining-nums tabular-nums;
}
.h-steps p { font-size: 17px; line-height: 1.6; }
/* A picture runs the full width of the column on a phone, from under the number, so its words stay readable. It is
   never drawn wider than the phone it was taken on. */
.h-shot { margin: 14px 0 0 -46px; max-width: 375px; }
.h-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 18px 36px -26px var(--shadow); }
@media (min-width: 860px) {
  .h-steps > li.h-with-shot { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
  .h-shot { margin: 0; }
}
.h-points { margin-top: 16px; }
.h-note { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: var(--wash); font-size: 16px; line-height: 1.6; color: var(--ink); }
.h-sec > .h-note:first-of-type { margin-top: 16px; }

/* Next, and the way to ask. */
.h-next { margin-top: 52px; }
.h-next .h-card { margin-top: 10px; }
.h-ask { margin-top: 44px; padding: 22px 20px; border-radius: 18px; background: var(--wash); }
.h-ask h2 { font-size: 27px; }
.h-ask p { margin-top: 8px; font-size: 16px; color: var(--ink); }

/* An article as a card: its drawing, its title and its one line. The index's lists and the search's answers. */
.h-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .h-list { grid-template-columns: 1fr 1fr; } }
.h-card {
  display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.h-card:hover { border-color: var(--dusty); background: var(--wash); }
.h-glyph { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--wash); color: var(--antique); }
.h-card:hover .h-glyph { background: var(--white); }
.h-glyph .icon { width: 22px; height: 22px; }
.h-card-text { min-width: 0; }
.h-card-title { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.h-card-sub { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--antique); }
.h-card-lead { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* The index: the search, then the articles in the order of the work. */
.h-search { margin-top: 26px; }
.h-search-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.h-search-box { position: relative; max-width: 560px; }
.h-search-box .text { min-height: 54px; padding-left: 46px; padding-right: 52px; font-size: 17px; }
.h-search-box .text::-webkit-search-cancel-button, .h-search-box .text::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.h-glass { position: absolute; left: 15px; top: 17px; color: var(--muted); pointer-events: none; }
.h-clear {
  position: absolute; right: 5px; top: 5px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer;
}
.h-clear:hover { color: var(--ink); background: var(--wash); }
.h-clear[hidden] { display: none; }
.h-results { margin-top: 18px; }
.h-results[hidden], .h-browse[hidden], .h-none[hidden] { display: none; }
.h-count { font-size: 15px; color: var(--muted); }
.h-none { margin-top: 12px; padding: 14px 18px; border-radius: 14px; background: var(--wash); font-size: 16px; color: var(--ink); }
.h-group { margin-top: 38px; }