/* WS-235: the "This page answers" line and the three-step "Using this page" strip under the title of every GPS and
   theme page (sitebuild/howto.py writes it; src/data/howto.json holds the words). Site tokens only (site.css :root);
   on a navy hero it takes the hero's white. The step numbers are CSS counters, never page text (no new numerals). */
.ht{margin:14px 0 4px;max-width:72ch;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--ink);text-align:left}
.on-navy .ht{color:var(--white)}
.ht-q{margin:0;font-family:var(--sans);font-size:15px;line-height:1.45;color:inherit;max-width:none}
.ht-k{font-weight:600}
.ht-use{margin:8px 0 0;border-top:1px solid var(--hair);padding-top:6px}
.on-navy .ht-use{border-top-color:rgba(251,249,245,.35)}
/* the toggle is a 44 px tap target (the site's rule): the padding that makes it 44 px tall is taken back by a negative
   margin, so it takes the same room as before and its words do not move; the extra reach goes up, into the strip's
   own rule and gap (or the title's line), not over the steps or the card below. howto.js measures it by its margin box. */
.ht-s{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:14px 0 2px;margin:-12px 0 0;cursor:pointer;
  list-style:none;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite)}
/* the Network page's own strip (sitebuild/network_v2.py) keeps its plain summary: the same 44 px, the same room */
.ht-use > summary:not(.ht-s){min-height:44px;padding:18px 0 calc(26px - 1.45em);margin:-18px 0 calc(1.45em - 26px);
  line-height:1.45;cursor:pointer}
.on-navy .ht-s{color:rgba(251,249,245,.86)}
.ht-s::-webkit-details-marker{display:none}
.ht-s::marker{content:""}
.ht-s::after{content:"\25B8";font-size:13px;letter-spacing:0;line-height:1}
.ht-use[open] > .ht-s::after{content:"\25BE"}
.ht-s:hover{color:var(--ink)}
.on-navy .ht-s:hover{color:var(--white)}
.ht-steps{counter-reset:ht;list-style:none;margin:4px 0 2px;padding:0;display:grid;gap:6px}
.ht-steps li{counter-increment:ht;position:relative;padding-left:30px;min-height:22px;max-width:none}
.ht-steps li::before{content:counter(ht);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  border:1px solid currentColor;font-family:var(--mono);font-size:12px;line-height:20px;text-align:center}
@media (min-width:768px){
  .ht-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px}
}
/* the phone: folded, the strip is one line (the question shows again when it opens); where the page has the GPS
   breadcrumb (country pages, themes, countries) that line sits at the right of the breadcrumb row, on paper; else beside
   the title's last line when it leaves room (howto.js measures and places it), so it adds no height before the first card */
@media (max-width:767px){
  .ht.ht-fold{margin-top:8px}
  .ht.ht-fold .ht-q{display:none}
  .ht.ht-fold .ht-use{border-top:0;margin-top:0;padding-top:0}
  .ht.ht-up{position:absolute;right:0;margin:0;display:flex;align-items:center;color:var(--ink);z-index:2}
  .ht.ht-up .ht-s{color:var(--graphite);letter-spacing:.04em;text-transform:none;font-size:12.5px;min-height:44px;
    padding:6px 0 20px;margin:0 0 -14px}
  .ht.ht-up .ht-use > summary:not(.ht-s){padding:calc(22px - .725em) 0;margin:calc(.725em - 22px) 0}
  .on-navy .ht.ht-up .ht-s{color:var(--graphite)}
  .on-navy .ht.ht-up .ht-s:hover{color:var(--ink)}
  .on-navy .ht.ht-up :focus-visible{outline-color:var(--ink)}
  .ht.ht-beside{position:absolute;margin:0;z-index:2;max-width:none}
  .ht.ht-beside .ht-s{min-height:44px;padding:22px 0 4px;margin:-18px 0 0;letter-spacing:.04em;text-transform:none;
    font-size:12.5px}
  .gn-crumb.ht-crumb ol{padding-right:124px;flex-wrap:nowrap}
  .gn-crumb.ht-crumb li[aria-current]{display:block;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media print{.ht-use{display:none}}