/* tips.css V1.0 - 2026-10-08, PT-TIPS. Page Tips inside the Help window (Howe's approved calibration, round 3): "LEARN ABOUT THIS PAGE" with numbered topics, a one-line preview and one drop-down open at a time; NEED MORE HELP? pinned to the bottom with the Slim Search and the 2x2 support grid; the small "?" on complex full-screen layers; hidden while a kiosk is on. The window itself is hub.css .h-helpwin (unchanged); only the pieces it never had are here. */

/* ---- the window: tips scroll, search and support stay pinned ---- */
.h-helpwin.pt-win { height: calc(100% - 68px); }
.pt-win .h-helpwin__body { flex: 1 1 auto; overscroll-behavior: contain; }
.pt-pin { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--line2); background: var(--panel2); }
.pt-pin[hidden] { display: none; }
.pt-pin > small { display: block; margin: 0 2px 7px; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.pt-pin .pt-slims { margin-bottom: 8px; }
.pt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pt-btn {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.pt-btn > .h-ic { width: 28px; height: 28px; padding: 6px; border-radius: var(--r-sm); background: var(--active-green-bg); color: var(--green); }
.pt-btn strong { display: block; font-size: 12px; line-height: 1.2; }
.pt-btn em { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.2; }

/* ---- LEARN ABOUT THIS PAGE ---- */
.pt-k { display: block; color: var(--purple); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.pt-lt h3 { margin: 4px 0 3px; font: 400 24px/1.02 var(--font-display); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.pt-sum { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.pt-tl { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); overflow: hidden; }
.pt-tr { border-top: 1px solid var(--line); }
.pt-tr:first-child { border-top: 0; }
.pt-tr.is-open { background: var(--panel2); }
.pt-ti {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 14px; align-items: center; gap: 10px; width: 100%;
  padding: 11px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700;
  text-align: left; cursor: pointer;
}
.pt-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--elev); color: var(--muted); font-size: 12px; font-weight: 900; }
.pt-num .h-ic { width: 14px; height: 14px; }
.pt-tr.is-open .pt-num { background: var(--green); color: var(--on-green); }
.pt-lb { min-width: 0; }
.pt-ti > .h-ic { width: 14px; height: 14px; color: var(--muted); transition: transform var(--t-fast); }
.pt-ti[aria-expanded="true"] > .h-ic { transform: rotate(180deg); color: var(--purple); }
/* The one-line preview: the opening words of the topic (about 40 characters at phone width). */
.pt-peek {
  display: block; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.4;
}
.pt-rk { display: block; color: var(--purple); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pt-drop { display: grid; gap: 8px; padding: 0 12px 13px 45px; color: var(--ink); font-size: 13.5px; line-height: 1.55; }
.pt-drop p { margin: 0; }
.pt-link {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 10px;
  border: 1px solid rgba(var(--green-rgb), .45); border-radius: var(--r-md); background: transparent;
  color: var(--green); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.pt-link .h-ic { width: 13px; height: 13px; }
.pt-notips { padding: 12px; margin-top: 12px; border: 1px dashed var(--line2); border-radius: var(--r-lg); background: var(--bg); color: var(--muted); font-size: 12.5px; }
.pt-notips b { display: block; margin-bottom: 2px; color: var(--ink); }
.pt-wait { padding: 18px 4px; color: var(--muted); font-size: 12px; text-align: center; }

/* ---- search results (Q8) ---- */
.pt-reshead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.pt-reshead span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-reshead button { flex: none; min-height: 32px; border: 0; background: none; color: var(--green); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.pt-rsec { display: block; margin: 14px 2px 6px; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.pt-rsec:first-of-type { margin-top: 4px; }

/* ---- the "?" doors ---- */
/* A complex full-screen layer: immediately left of its X, or at the right end of its header. */
.pt-q { flex: none; color: var(--muted); }
/* An H365UI sheet's X is absolute (top 4px, right 8px, 36px): the "?" takes the slot immediately left of it, on the same line. */
.pt-q--register, .pt-q--coach { position: absolute; top: 4px; right: 46px; width: 36px; height: 36px; }
.pt-q--membership { margin-left: auto; width: 36px; height: 36px; }
.pt-q--assistance { justify-self: end; width: 36px; height: 36px; }
.pt-q--mst, .pt-q--guides, .pt-q--news, .pt-q--gear { width: 36px; height: 36px; }
.pt-q--wz { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; }
.wz__bar:has(> .pt-q--wz) { position: relative; padding-right: 52px; }
.h-appbar .pt-row { margin-left: auto; }
/* U2: never on a kiosk. The shell marks the document (programs.js, `data-kiosk`); tips.js mirrors H365Kiosk. */
html[data-kiosk="1"] [data-pt-help],
html[data-kiosk="1"] .h-topicon[data-go="support:"],
html[data-pt-kiosk] [data-pt-help],
html[data-pt-kiosk] .h-topicon[data-go="support:"],
html[data-kiosk="1"] .h-help-layer,
html[data-pt-kiosk] .h-help-layer { display: none !important; }
@media (prefers-reduced-motion: reduce) { .pt-ti > .h-ic { transition: none; } }
/* On a standalone page Help hangs off <body>, not the shell's .h-app: pin it to the viewport. */
body > .h-help-layer { position: fixed; }