/* Collapsible Horizon strip. --hzh is a registered length so the strip AND everything sized from it (the board) glide together. */
@property --hzh { syntax: "<length>"; inherits: true; initial-value: 140px; }
html.hz { transition: --hzh .28s ease; }
html.hz.hzc { --hzh: 28px; }
#horizon .hzcol { position: absolute; z-index: 9; right: 6px; top: 6px; min-height: 26px; padding: 0 9px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(10,8,20,.55); color: #fff; font: 700 11px/1 "Segoe UI", Helvetica, Arial, sans-serif; cursor: pointer; pointer-events: auto; opacity: .85; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#horizon .hzcol[hidden] { display: none; }
#horizon .hzcol:hover, #horizon .hzcol:focus-visible { opacity: 1; background: rgba(10,8,20,.8); }
#horizon .hzcol:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
#horizon .hzcol::after { content: ""; position: absolute; inset: -9px -6px; }   /* bigger touch target than the pill looks */
html.hzc #horizon .hzcol { left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: linear-gradient(rgba(10,8,20,.35), rgba(10,8,20,.6)); font-size: 12px; opacity: 1; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
html.hzc #horizon .hzcol::after { inset: 0; }
html.hzc #horizon > *:not(svg):not(.hzcol) { visibility: hidden !important; }
html.hzc #horizon { box-shadow: 0 2px 8px rgba(23,32,51,.15); }
@media (prefers-reduced-motion: reduce) { html.hz { transition: none; } }