/* =============================================================================
   hyyryn-help-card.css                                        21 Oct 2026 (rp184)
   Help and contact (support.html), the footer pass's eighth page.

   Sir, 21 Oct 2026: improve each footer page, push it live, then the next.
   Measured (Mason tools/cards.mjs, the walk at 390 and 1440): every surface
   square (the search, the help desk, the contents, the sheet, the road's
   stub, the form's card, the form's fields, the buttons); the help desk and
   the warning marked by a gold bar down one side, the contents' and the
   index's current row by a bar down its side; and on a phone a page 10,000px
   long whose contents sit once at the top, shut. Now:
     - the site's card grammar: a 22px corner (18 on a phone) on the search,
       the desk, the contents and the sheet; 16px on the cards inside the
       sheet; 12px on fields and choices; buttons pills. The sheet keeps its
       ruled margin (it is the paper); the double rule along the top of the
       stub and the form's card goes with the square corner it ruled;
     - the current row a tint and a corner, never a bar down a side;
     - on a phone and a tablet the contents is a bar that stays under the
       masthead, saying the part being read ("Contents · Paying"); pressed,
       it opens over the page, and choosing a part shuts it (as before).
   ============================================================================= */
.hp { --hc-r: 22px; }
@media (max-width: 600px) { .hp { --hc-r: 18px; } }

/* ── the panes and the sheet ── */
.hp .hp-ask, .hp .hp-desk, .hp .hp-toc, .hp .hp-sheet { border-radius: var(--hc-r); }
.hp .hp-sheet { overflow: clip; }
.hp .hp-desk::after { display: none; }
.hp .hp-desk { box-shadow: var(--hp-pane), inset 0 0 0 1px rgba(212,169,67,.38); }
.hp .hp-stub, .hp .hp-card { border-radius: 16px; }
.hp .hp-stub::before, .hp .hp-card::before { display: none; }
.hp .hp-stub { box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(10,22,40,.04); }
.hp .hp-now { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(212,169,67,.55); }

/* ── what is pressed: pills; what is typed into: a 12px corner ── */
.hp .hp-btn { border-radius: 999px; }
.hp .hp-btn.is-solid { overflow: hidden; }
.hp .hp-find input { border-radius: 14px; }
.hp .hp-f input, .hp .hp-f textarea, .hp .hp-chip span { border-radius: 12px; }

/* ── the current row: a tint and a corner, never a bar down a side ── */
/* (a row's rule is a line under it: square at rest, since a corner bends the line; a corner when lit or pointed at) */
.hp .hp-toc a:is(:hover, [aria-current="true"]), .hp .hp-grp:is(:hover, [aria-current="true"]) { border-radius: 10px; }
.hp .hp-toc a[aria-current="true"], .hp .hp-grp[aria-current="true"] { box-shadow: inset 0 0 0 1px rgba(212,169,67,.45); }
.hp .hp-warn { border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(212,169,67,.4); }

/* ── a phone and a tablet: the contents, a bar that stays and says where you are ──
   The bar holds 48px of the page's flow whether shut or open: the list opens OVER the page (absolute), so opening it
   far down the page moves nothing under it. A part chosen lands under the bar: the scroll padding is the masthead's,
   each part's margin the bar's (the two add up, Mason 61). */
.hp-toc-now { display: none; }
@media (max-width: 768px) { :root { --bar: 64px; } }
@media (max-width: 1000px) {
  .hp .hp-toc { position: sticky; top: var(--bar, 64px); z-index: 40; height: 48px; margin-bottom: 20px; padding: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
  .hp .hp-toc details { position: absolute; left: 0; right: 0; top: 0; padding: 0 16px; border-radius: 16px;
    background: rgba(255,253,248,.96); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: var(--hp-pane); }
  .hp .hp-toc details[open] { max-height: calc(100vh - var(--bar, 64px) - 24px); max-height: calc(100dvh - var(--bar, 64px) - 24px); overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: 12px; box-shadow: var(--hp-pane), 0 30px 60px -20px rgba(10,22,40,.45); }
  .hp .hp-toc details > summary { min-height: 48px; padding: 0; align-items: center; }
  .hp .hp-toc details[open] > summary { border-bottom: 1px solid var(--line-2); }
  .hp-toc-now:not(:empty) { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--hp-serif, serif); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--navy); }
  .hp-toc-now:not(:empty)::before { content: '·'; margin: 0 8px 0 2px; color: var(--hp-gold-ink, #83632C); }
  .hp .hp-toc details[open] .hp-toc-now { display: none; }
  /* the masthead's height only in the scroll padding: a focus inside the padding counts as hidden, so with the bar's
     height in it too, pressing the bar (it takes the focus) scrolled the page 400px. The bar's room is each part's own. */
  html.hp-page { scroll-padding-top: var(--bar, 64px); }
  .hp .hp-sec, .hp .hp-talk { scroll-margin-top: 64px; }
}
@media (forced-colors: active) { .hp .hp-toc a[aria-current="true"], .hp .hp-grp[aria-current="true"] { border: 1px solid CanvasText; } }