/* ROILadder v5 shared chrome, every page. Loads after site.css. */
.skip-link{position:absolute;left:-9999px;background:var(--navy);color:var(--gold);padding:.85rem 1.25rem;z-index:300;text-decoration:none;font-weight:700}
.skip-link:focus{left:0;top:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px var(--gold);border-radius:2px}
.hdr a:focus-visible,section.dark a:focus-visible,section.dark button:focus-visible,footer a:focus-visible,.hero a:focus-visible,.navy-block a:focus-visible,.lit-sec a:focus-visible{outline-color:#fff}
/* Decision of 13 September: the header is not sticky on phones. Desktop keeps the concept's sticky header. */
@media(max-width:900px){
  .hdr{position:static}
  [id]{scroll-margin-top:16px}
  .cp .dg-out,.cp-right{scroll-margin-top:16px}
}
@media(max-width:640px){
  .stack-m>*{top:12px}
  /* phones zoom into a field whose text is under 16px; keep the form at 16px on small screens */
  input:not([type=range]):not([type=radio]):not([type=checkbox]),select,textarea{font-size:16px}
  /* homepage calculator tiles: tighter value-to-label spacing on phones (14 Sep) */
  #numbers .met{padding:.45rem .4rem .4rem}
  #numbers .met strong{line-height:1.1;margin-bottom:.1rem}
  #numbers .met span{display:block;line-height:1.15}
  /* homepage results box: centered on phones (15 Sep) */
  #numbers .gap{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.2rem}
  /* gap pill on phones: no slide transition on position, only on show/hide; fixed spot above the visible bottom */
  .pill{bottom:calc(16px + env(safe-area-inset-bottom))}
  /* stacked cards: solid block, equal heights are set by site.js; the last card's shadow only */
  .stack-m>*{box-sizing:border-box}
}