.skip-link{position:fixed;z-index:100;top:8px;left:8px;transform:translateY(-160%);padding:10px 14px;background:var(--surface);color:var(--text);border:2px solid var(--accent)}
.skip-link:focus{transform:none}
[data-rb-navlink]{display:flex;align-items:center;min-height:44px;font-size:15px}
[data-rb-navlink][data-rb-on="true"]{color:var(--text);border-bottom:2px solid var(--accent)}
[data-rb-burger]{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--text);cursor:pointer;flex:none}
[data-rb-sheet]{display:none}
@media (max-width:1100px){[data-rb-desknav]{display:none!important}[data-rb-burger]{display:inline-flex}[data-rb-sheet][data-rb-open="true"]{display:grid}}
[data-rb-sheetlink]{display:flex;align-items:center;min-height:52px;font-size:18px;border-bottom:1px solid var(--line)}

/* The design's rule: the header stays one row. Below 420px the theme control
   abbreviates to Auto / L / D. The aria-labels keep the spoken names intact.
   The masthead is named in every selector because each page stylesheet loads
   after this file and repeats the plain button rule; without it the
   abbreviation is undone on the pages the Worker renders. */
@media (max-width:420px){
[data-rb-header] button[data-rb-tab]{padding:0 10px}
[data-rb-header] button[data-rb-theme-btn="light"],[data-rb-header] button[data-rb-theme-btn="dark"]{font-size:0}
[data-rb-header] button[data-rb-theme-btn="light"]::after{content:"L";font-size:13px}
[data-rb-header] button[data-rb-theme-btn="dark"]::after{content:"D";font-size:13px}
}

/* Under 360px the wordmark plus both controls no longer fit at the sizes above,
   so the abbreviation runs the whole way, the padding tightens and the wordmark
   steps down two points. Same rule, same mechanism: the header stays one row.
   The spoken names are unchanged and every control keeps a 24px target. */
@media (max-width:360px){
header[data-rb-header]{gap:8px!important}
[data-rb-header] a:not(.skip-link) span{font-size:17px!important}
[data-rb-header] button[data-rb-tab]{padding:0 6px;min-width:24px}
[data-rb-header] button[data-rb-theme-btn="system"]{font-size:0}
[data-rb-header] button[data-rb-theme-btn="system"]::after{content:"A";font-size:13px}
}