/* v138e: left = back + HFR (roomy gap); center = PP mark; right = clock only.
   All items share one height / vertical center / bottom baseline. OFF tag stays inside the radio unit. */
:root{
  --pp129-header-height:calc(72px + env(safe-area-inset-top,0px));
  --pp138-ctrl:44px;          /* shared height for back, radio unit, mark, clock */
  --pp138-left-gap:14px;      /* clear gap between back and radio */
  --pp138-col-gap:10px;
  --pp138-yellow:#F8CC0C;
}
@media(max-width:760px){
  :root{
    --pp129-header-height:calc(56px + env(safe-area-inset-top,0px));
    --pp138-ctrl:36px;
    --pp138-left-gap:12px;
    --pp138-col-gap:8px;
  }
}
@media(max-width:400px){
  :root{
    --pp138-ctrl:34px;
    --pp138-left-gap:10px;
    --pp138-col-gap:6px;
  }
}
@media(max-width:360px){
  :root{
    --pp138-ctrl:32px;
    --pp138-left-gap:8px;
    --pp138-col-gap:5px;
  }
}

.pp129-header{
  position:sticky;top:0;z-index:60;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  column-gap:var(--pp138-col-gap);
  min-height:var(--pp129-header-height);
  padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
  box-sizing:border-box;
  background:#000;color:var(--pp138-yellow);
  border-bottom:2px solid var(--pp138-yellow);
  font-family:"Space Mono",monospace;
}
@media(max-width:760px){.pp129-header{padding-left:8px;padding-right:8px}}
@media(max-width:400px){.pp129-header{padding-left:6px;padding-right:6px}}

.pp130-left,.pp130-right{
  display:flex;align-items:center;min-width:0;
}
.pp130-left{justify-self:start;justify-content:flex-start;gap:var(--pp138-left-gap)}
.pp130-right{justify-self:end;justify-content:flex-end;gap:var(--pp138-col-gap)}

/* Round back — exact shared ctrl size */
a.pp138-back{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;flex:none;
  width:var(--pp138-ctrl);height:var(--pp138-ctrl);
  min-width:var(--pp138-ctrl);min-height:var(--pp138-ctrl);
  padding:0;border:2px solid var(--pp138-yellow);border-radius:50%;
  background:#000;color:var(--pp138-yellow);text-decoration:none;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
a.pp138-back .jf-back-arrow{
  display:block;width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
a.pp138-back:focus-visible{outline:2px solid var(--pp138-yellow);outline-offset:3px}

/* HFR unit: fixed shared height; OFF sits fully inside so bottoms align */
.pp130-radio{
  position:relative;display:block;flex:none;
  width:var(--pp138-ctrl);height:var(--pp138-ctrl);
  box-sizing:border-box;padding:0;margin:0;overflow:visible;
}
.pp130-radio .np-r{display:contents}
.pp130-radio .srf{
  position:relative;display:block;
  width:100%;height:100%;
  box-sizing:border-box;margin:0;padding:0;
}
.pp130-radio .srf-btn{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  padding:0;margin:0;border:0;border-radius:50%;background:transparent;cursor:pointer;
}
.pp130-radio .srf-disc{
  display:block;width:100%;height:100%;border-radius:50%;
  /* inset disc slightly so OFF tag can sit on the rim without overflowing the unit box */
  box-sizing:border-box;
}
.pp130-radio .srf-lbl,.pp130-radio .srf-pp{display:none!important}
/* Keep OFF fully inside the ctrl box (home hangs it outside — PP needs shared baseline) */
.pp130-radio .srf-state69{
  position:absolute!important;
  right:0!important;bottom:0!important;
  left:auto!important;top:auto!important;
  z-index:2;
  box-sizing:border-box;
  min-width:0;max-width:calc(var(--pp138-ctrl) * .55);
  padding:1px 3px;border:1px solid var(--pp138-yellow);border-radius:3px;
  background:#000;color:var(--pp138-yellow);
  font:700 7px/1.1 "Space Mono",ui-monospace,monospace;letter-spacing:.02em;
  transform:none!important;
}
.pp130-radio .srf.is-on .srf-state69{background:var(--pp138-yellow);color:#000}
.pp130-radio .srf.is-on .srf-disc{animation:pp130-spin 1.8s linear infinite}
@keyframes pp130-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pp130-radio .srf.is-on .srf-disc{animation:none}}
@media(max-width:400px){
  .pp130-radio .srf-state69{font-size:6px;padding:1px 2px}
}

/* Center mark — same rendered height as ctrl */
.pp129-title{justify-self:center;text-align:center;line-height:0;min-width:0}
.pp129-brand{display:block;line-height:0;margin:0;width:var(--pp138-ctrl);height:var(--pp138-ctrl)}
.pp132-brand-mark{display:block;width:var(--pp138-ctrl);height:var(--pp138-ctrl);margin:0 auto}
.pp129-page{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Clock — same height as ctrl, 1px border */
.pp138-clock{display:inline-flex;align-items:center;flex:none;margin:0;transform:none;height:var(--pp138-ctrl)}
.pp138-clock .np-clock{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-sizing:border-box;margin:0;
  height:var(--pp138-ctrl);padding:0 8px;
  border:1px solid var(--pp138-yellow);background:#000;color:var(--pp138-yellow);
  font:400 10px/1.1 "Space Mono",monospace;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.pp138-clock .np-cd,.pp138-clock .np-ct{display:block;font:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0;line-height:1.1}
@media(max-width:760px){
  .pp138-clock .np-clock{padding:0 5px;font-size:9px;letter-spacing:.02em}
}
@media(max-width:400px){
  .pp138-clock .np-clock{padding:0 4px;font-size:8px;letter-spacing:.01em}
}
@media(max-width:360px){
  .pp138-clock .np-clock{padding:0 3px;font-size:7.5px}
}

html{scroll-padding-top:var(--pp129-header-height)}