/* Header extras on every page: Inspect, Lights out and the command menu (inspect.js,
   lights-out.js, command-menu.js). The pages share one header template; this adds the buttons'
   styles and the extra grid column they need. `.pg .hdr` outranks each page's own `.hdr` rules. */
.hdr-right{display:flex;align-items:center;justify-self:end;gap:4px}
.hdr-right .hdr-status{margin-right:16px;white-space:nowrap}
/* Below 1200px the status line steps aside so the buttons keep their room (the homepage repeats
   it in the hero) */
@media (max-width: 1200px){ .pg .hdr-status{display:none !important} }
.hx{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--body);cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;transition:background .2s,color .2s}
.hx:hover,.hx[aria-pressed="true"]{background:var(--tile);color:var(--ink)}
.hx:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.hx-search{width:auto;gap:10px;padding:0 8px 0 12px;border:1px solid var(--line)}
.hx-search:hover{background:transparent;border-color:var(--ink)}
.hx-kbd{padding:2px 6px;border-radius:4px;background:var(--tile);color:var(--ink);font-size:11px;letter-spacing:.02em}
.hx-sep{width:1px;height:20px;background:var(--line);margin:0 8px}
.hx[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;padding:8px 12px;border-radius:999px;background:var(--ink);color:var(--btn-ink);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-4px);transition:opacity .15s,transform .2s cubic-bezier(.16,1,.3,1)}
.hx[data-tip]:hover::after,.hx[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
/* The last button sits at the page edge, so its tooltip lines up with its right side instead of
   centring (a centred one overflows the page, even while hidden) */
.hx-search[data-tip]::after{left:auto;right:0;transform:translate(0,-4px)}
.hx-search[data-tip]:hover::after,.hx-search[data-tip]:focus-visible::after{transform:translate(0,0)}
/* Below 900px Lights out sits next to it at the edge too, so it lines up the same way */
@media (max-width: 900px){
  .hx-lights[data-tip]::after{left:auto;right:0;transform:translate(0,-4px)}
  .hx-lights[data-tip]:hover::after,.hx-lights[data-tip]:focus-visible::after{transform:translate(0,0)}
}
@media (hover: none){ .hx[data-tip]::after{display:none} }
/* All three extras show at every width (Inspect pins on tap, so it works on touch too); smaller
   screens drop the divider and the ⌘K label, and tighten the header so the name keeps its room */
@media (hover: none), (max-width: 900px){
  .hx-sep{display:none}
  .hx-search{width:44px;padding:0;border:0}
  .hx-search .hx-kbd{display:none}
}
/* Phones: name, extras, menu button */
@media (max-width: 900px){ .pg .hdr{grid-template-columns:minmax(0,1fr) auto auto !important;gap:16px !important} }
/* Tablets: name, nav links, extras */
@media (min-width: 641px) and (max-width: 900px){
  .pg .hdr{grid-template-columns:auto minmax(0,1fr) auto !important}
  .pg .nav-center{gap:16px !important}
}
@media (max-width: 640px){
  .pg .hdr{gap:8px !important}
  .hdr-right{gap:0}
}
/* Small phones: slightly smaller buttons so the name isn't cut off */
@media (max-width: 400px){ .hx,.hx-search{width:40px;height:40px} }