/* nearfieldapp.com help pages (TASK-278; split into one task per page 2026-10-16).
 *
 * Only what the help pages add to site.css. Every colour, radius and size is a brand
 * token that site.css already reads (tokens-v2.css). The help pages are the content layer, so
 * nothing here uses the glass material; the glass stays on the nav bar, as on the rest of the
 * site (owner ruling 2026-10-09).
 *
 * A task page reads top to bottom: crumbs, the task as the title, one line on what it does,
 * the numbered steps, what you see when it worked, then a short "Related" list.
 */

.help.legal { max-width: 760px; padding-top: 56px; padding-bottom: 72px; }
.help .crumbs { font-size: var(--text-small); color: var(--text-secondary); margin-bottom: 20px; }
.help .crumbs a { color: var(--text-secondary); text-decoration: none; }
.help .crumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.help h1 { text-wrap: balance; }
.help.task h1, .help.hub h1 { font-size: clamp(34px, 5.4vw, 48px); letter-spacing: -0.04em; line-height: 1.08; }
.help .lede { font-size: 19px; line-height: 1.5; color: var(--text-secondary); margin-top: 14px; max-width: 60ch; text-wrap: pretty; }
.help h2 { font: 600 22px/1.25 var(--font-sans); letter-spacing: -0.02em; margin: 44px 0 12px; }
.help h2 a { color: inherit; text-decoration: none; }
.help h2 a:hover { text-decoration: underline; }
.help h3 { font: 600 18px/1.3 var(--font-sans); letter-spacing: -0.015em; margin: 28px 0 8px; }
.help p { text-wrap: pretty; }
.help ul + p, .help ol + p, .help .safe-box + p { margin-top: 14px; }

/* The words printed on a button, tab or heading in the app (b.ui), and on the computer's own
   screens (span.ui): set apart so a reader finds them on screen. They may wrap on a phone. */
.help b.ui, .help span.ui {
  font-weight: 600; color: var(--text-primary);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 0 6px; white-space: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (min-width: 600px) { .help b.ui, .help span.ui { white-space: nowrap; } }

/* One-action steps. The layout is site.css `.steps` (a block item, the number in its padding);
   the help pages draw a larger round number in the accent colour. */
.help ol.steps { gap: 14px; margin: 16px 0 0; }
.help ol.steps > li { padding-left: 46px; min-height: 30px; font-size: 17px; line-height: 1.55; color: var(--text-secondary); }
.help ol.steps > li::before {
  top: -1px; width: 30px; height: 30px; border-radius: 50%;
  font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  background: var(--color-accent); color: var(--text-on-accent);
}
.help ol.steps-links > li a { font-weight: 600; }

/* The safety box, and the note on a page that describes a later update. */
.help .safe-box {
  margin: 24px 0 8px; padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.help .safe-box h3 { font: 600 17px/1.3 var(--font-sans); margin: 0 0 8px; }
.help .safe-box p, .help .safe-box li { color: var(--text-primary); font-size: 16px; }
.help .safe-box ul { padding-left: 20px; margin: 8px 0 0; display: grid; gap: 6px; }
.help .tag-later {
  margin: 24px 0 0; padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--nf-amber-tint); color: var(--nf-amber-text); font-size: 15.5px; font-weight: 500;
}

/* A list of pages: the tasks on a group page, the help index, and "Related" at the foot of a task.
   One row per page, title over one line of description, grouped in one surface like a settings list. */
.help .task-list, .help .related ul {
  list-style: none; padding: 0; margin: 14px 0 0; display: block;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.help .task-list > li + li, .help .related li + li { border-top: 1px solid var(--color-border); }
.help .task-list a, .help .related a {
  position: relative; display: grid; gap: 2px; padding: 14px 44px 14px 18px;
  text-decoration: none; color: var(--text-primary);
  transition: background-color var(--t-fast);
}
.help .task-list a::after, .help .related a::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--text-tertiary); border-top: 2px solid var(--text-tertiary); transform: rotate(45deg);
}
.help .task-list a:hover, .help .related a:hover { background: var(--color-hover); }
.help .task-list a:focus-visible, .help .related a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.help .task-list b, .help .related b { font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; }
.help .task-list span, .help .related span { font-size: 14.5px; color: var(--text-secondary); line-height: 1.4; }
.help .task-list > li:target a { background: var(--color-accent-tint); }

.help .related { margin-top: 56px; padding-top: 4px; }
.help .related h2 { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }

/* The help index: one section per group, with its tasks. */
.help-index .help-group { margin-top: 48px; }
.help-index .group-head { display: grid; gap: 4px; }
.help-index .group-head h2 { margin: 0; }
.help-index .group-head p { color: var(--text-secondary); font-size: 16px; }


.help .window { margin: 28px 0 0; }
.help .next { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: 16px; }

/* The guides index: one card per guide. */
.help-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 700px) { .help-grid { grid-template-columns: 1fr 1fr; } }
.help-grid a.card { display: block; text-decoration: none; color: inherit; padding: 22px 22px 24px; }
.help-grid a.card:hover h3, .help-grid a.card:focus-visible h3 { text-decoration: underline; }
.help-index section.help-group { padding: 0; }
/* The first row of each group opens the group page; it reads a little stronger than its tasks. */
.help-index .task-list > li:first-child b { color: var(--color-link); }