/* p50 (t1380u): the top ticker as one slim technical status bar. One dark pill, mono text, a pulsing status dot at the left.
   Hover, focus or tap on the dot slides the network status (window.GOS_NET_TAG from /design/net_tag.js) out to the left.
   The line is centred in the pill (equal room both sides), the pill is the longest line wide, nothing is cut. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/design/fonts/jbmono_latin.woff2) format('woff2')}
.gtk{--h:28px;--pad:30px;--fs:11.5px;--gc:#E2B455;--gr:rgba(226,180,85,.55);
 position:relative;display:block;height:var(--h);width:var(--gw,auto);box-sizing:border-box;border-radius:999px;
 background:rgba(12,14,12,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
 box-shadow:inset 0 1px 7px rgba(0,0,0,.45),inset 0 0 14px rgba(217,164,65,.07),0 2px 14px rgba(0,0,0,.25);
 font:500 var(--fs)/1 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:.04em;
 color:rgba(237,226,196,.74);white-space:nowrap;transition:background .2s}
.gtk:hover{background:rgba(12,14,12,.84)}
.gtk[data-net=live]{--gc:#FFDD86;--gr:rgba(255,221,134,.6)}
.gtk .gtx{position:absolute;inset:0;display:grid;align-items:center;justify-items:center;padding:0 var(--pad);border-radius:inherit;overflow:hidden;color:inherit;text-decoration:none}
.gtk .gtx:focus-visible{outline:2px solid #F4D27A;outline-offset:2px}
.gtk .gl{grid-area:1/1;display:block;text-align:center;line-height:var(--h);transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s cubic-bezier(.2,.7,.2,1);transform:translateY(70%);opacity:0}
.gtk .gl.on{transform:none;opacity:1}
.gtk .gl.up{transform:translateY(-70%);opacity:0}
.gtk .gl .k{text-transform:uppercase;letter-spacing:.1em;color:rgba(237,226,196,.6);font-weight:500}
.gtk .gl b{color:#F4D27A;font-weight:600;letter-spacing:.02em}
.gtk .gl .dot{color:rgba(217,164,65,.6);padding:0 .35em}
/* the status dot, in the left room of the pill */
.gtk .gst{position:absolute;left:0;top:0;bottom:0;width:calc(var(--pad) - 4px);display:flex;align-items:center;justify-content:center;padding-left:3px;box-sizing:border-box;cursor:pointer;border-radius:999px;outline:none;z-index:2;-webkit-tap-highlight-color:transparent}
.gtk .gst:focus-visible .gsd{outline:2px solid #F4D27A;outline-offset:3px}
.gtk .gsd{position:relative;display:block;width:7px;height:7px;border-radius:50%;background:var(--gc);box-shadow:0 0 6px var(--gr)}
.gtk .gsd::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gc);opacity:0;animation:gtkp 1.9s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes gtkp{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.1);opacity:0}}
/* the label slides out to the left of the dot, outside the pill, as its own small chip */
.gtk .gsl{position:absolute;right:calc(100% + 5px);top:0;height:var(--h);display:flex;align-items:center;gap:7px;padding:0 11px;box-sizing:border-box;border-radius:999px;
 background:rgba(12,14,12,.84);box-shadow:inset 0 1px 7px rgba(0,0,0,.45),inset 0 0 14px rgba(217,164,65,.08);
 font:600 calc(var(--fs) - 1.5px)/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--gc);white-space:nowrap;
 transform:translateX(var(--gsx,0px));clip-path:inset(0 0 0 100% round 999px);opacity:0;pointer-events:none;transition:clip-path .2s cubic-bezier(.2,.7,.2,1),opacity .2s}
.gtk .gst:hover .gsl,.gtk .gst:focus-visible .gsl,.gtk.open .gsl{clip-path:inset(0 0 0 0 round 999px);opacity:1}
@media (hover:hover){.gtk .gst:hover .gsd{box-shadow:0 0 9px var(--gr)}}
@media (prefers-reduced-motion:reduce){.gtk .gsd::after{animation:none;opacity:0}.gtk .gsl{transition:none}.gtk .gl{transition:none}}