/* ---------------------------------------------------------------------------
   /learn/documents/ only. Added 9 Sep 2026.

   A SEPARATE SHEET, not more rules in learn.css, for the same reason
   bondlive.css is separate: learn.css is downloaded by 22 country guides and
   123 bond pages, none of which can use a single rule below. Adding ~40 lines
   there would make 145 pages fetch styles that can never apply, and blur which
   file owns what.

   NO JAVASCRIPT ON THIS PAGE. Every learn page is script-free except the bond
   pages, which carry a first-party allowlist for the live price block, and
   verify.py enforces that. A native <select> cannot navigate without JS, so the
   country picker is a <details> disclosure instead: it opens on tap, needs no
   script, works with keyboard and screen readers out of the box, and degrades
   to a plain visible list if CSS fails. The 17 anchors stay in the HTML either
   way, so they remain crawlable whether the disclosure is open or shut.
   --------------------------------------------------------------------------- */

.jump{
  background:var(--bg2); border:1px solid var(--border); border-radius:6px;
  margin:18px 0 22px; font-size:14.5px;
}
/* PURPLE, not the default text colour: this page's one interactive control
   needs to read as a control. Purple is the site's "this is a thing you can
   act on" accent (the bond pages' source chip uses it) and stays distinct from
   the blue that every ordinary link on the page already uses. */
.jump > summary{
  cursor:pointer; padding:11px 14px; color:var(--purple); font-weight:600;
  list-style:none; display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.03em;
}
.jump > summary::-webkit-details-marker{ display:none }
/* The chevron is drawn rather than a glyph so it can rotate on open, and it is
   aria-hidden by being pure CSS -- the <summary> already announces its state. */
.jump > summary::after{
  content:""; width:7px; height:7px; margin-left:auto;
  border-right:2px solid var(--purple); border-bottom:2px solid var(--purple);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s;
}
.jump[open] > summary::after{ transform:rotate(-135deg) translate(-4px,-4px) }
.jump > summary:hover{ color:var(--text-strong) }
.jump > summary:hover::after{ border-color:var(--text-strong) }
.jump > summary:focus-visible{ outline:2px solid var(--purple); outline-offset:-2px }

.jump-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:2px 10px; padding:4px 14px 14px; margin:0; list-style:none;
  border-top:1px solid var(--border);
}
.jump-list li{ margin:0 }
.jump-list a{ display:block; padding:6px 2px; font-size:14.5px }
/* The count is the useful half of the label: it tells a reader whether the
   section is worth the jump before they take it. */
.jump-list .n{ color:var(--text-dim); font-family:var(--mono); font-size:12px }

@media (max-width:640px){
  .jump-list{ grid-template-columns:1fr 1fr; }
}
@media (max-width:420px){
  .jump-list{ grid-template-columns:1fr; }
}

/* ADDED 10 Sep 2026. Each country table scrolls sideways inside its own box on
   a narrow screen instead of widening the page: the page had a 475px table on
   a 390px phone and the whole body scrolled with it. Only this page has these
   tables, so the rule lives here, not in learn.css. */
.tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px 0 18px }
.tblwrap > .tbl{ margin:0; min-width:420px }