/* Header order ticker. Lives in the theme's top-bar-left text widget, so it inherits the bar's
   14px/#323232 and must never make the 37px bar taller. Ships as a real file because
   LiteSpeed's optimiser strips inline styles.

   The durations below are FALLBACKS only. wh-order-clock.js sets both the line's transition and
   the ring's animation from its own TK_CYCLE / TK_MOVE, so the ring can never finish out of step
   with the text. */

/* The Text widget wraps our span in a <p>, whose line-box strut is 2px taller than the span
   itself and pushed the 37px bar to 39px on every page. Making that one <p> a flex container
   drops the strut so the bar keeps its original height. Scoped with :has() so it only ever
   applies to the paragraph that actually holds the ticker. */
.top-bar-left .textwidget p:has(> .wht){display:flex;align-items:center;min-width:0;line-height:1.5}

/* The theme splits the bar 50/50, which leaves the longest sentence about 470px and ellipsises
   two of the five frames. The right half only carries two short links, so the space is there. */
.topbar-wrapper .top-bar-left{flex:1.7 1 auto;min-width:0}
.topbar-wrapper .top-bar-right{flex:1 1 auto;min-width:0;white-space:nowrap}

/* vertical-align:middle, not the default baseline. An inline-flex box sitting on the baseline
   leaves the font's descender space beneath it. */
.wht{display:inline-flex;align-items:center;gap:9px;max-width:100%;min-width:0;
  vertical-align:middle;overflow:hidden}
.wht[hidden]{display:none}

/* ---- the mark: a status dot inside a ring that counts down to the next message ---- */
.wht-mark{position:relative;flex:0 0 20px;width:20px;height:20px;display:block}
.wht-ring{position:absolute;inset:0;width:20px;height:20px;transform:rotate(-90deg)}
.wht-ring circle{fill:none;stroke-width:2}
.wht-ring-t{stroke:rgba(50,50,50,.16)}
/* 2*pi*8 = 50.27 */
.wht-ring-f{stroke:#4C6650;stroke-linecap:round;stroke-dasharray:50.27;stroke-dashoffset:0;
  animation:whtsweep 7s linear forwards}
.wht.is-hot .wht-ring-f{stroke:#B90000}
.wht.is-paused .wht-ring-f{animation-play-state:paused}
.wht--still .wht-ring{display:none}
@keyframes whtsweep{to{stroke-dashoffset:50.27}}

.wht-pip{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:#4C6650}
.wht.is-hot .wht-pip{background:#B90000}
.wht--still .wht-pip{position:static;margin:0}
.wht--still .wht-mark{flex:0 0 7px;width:7px;height:7px}

/* ---- the line: one line, never two ---- */
/* The viewport clips the travel. Without it a full-width slide would carry the text straight
   across the "All deadlines" link on its way out of frame. */
.wht-view{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden}
.wht-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* Fallback only: wh-order-clock.js sets duration AND timing function per phase. Symmetric by
     default, because the house ease-out made the line leap away and coast to a stop. */
  transition:opacity .9s cubic-bezier(.65,0,.35,1), transform .9s cubic-bezier(.65,0,.35,1)}
/* Three levels of emphasis. The bar gives us 14px on white, so the separation has to come from
   weight and ink rather than size: everything here stays 14px. */
.wht-k{font-weight:600;color:#1B1512}        /* which range */
.wht-t{font-weight:600;color:#1B1512}        /* when it closes */
.wht-d{font-weight:600;color:#1B1512}        /* the date that buys you */
.wht-m{color:#6F6459;font-weight:400}        /* the words joining them */

/* Inside the last hour the countdown itself reddens. The range name and the date stay black:
   turning the whole line red would make five ranges look like five alarms. */
.wht.is-hot .wht-t{color:#B90000}
.wht-line.is-still{transition:none}

/* The travel is the FULL width and there is no fade at all: stopping dead 18px along with the
   opacity untouched reads as a glitch rather than a slide. */
.wht--hard .wht-line.is-out{transform:translateX(-100%)}
.wht--hard .wht-line.is-in{transform:translateX(100%)}

/* The link is a pill. border-bottom:none overrides the theme's underline on every .top-bar a. */
/* 12px x 1.25 = 15, plus 2px padding each side and a 1px border each side, is exactly 21px:
   the line-box height. Anything taller and the pill, not the text, sets the bar's height and
   the whole site header grows by 2px. */
.wht-more{flex:0 0 auto;font-size:12px;line-height:1.25;padding:2px 11px;border-radius:999px;
  background:rgba(27,21,18,.055);border:1px solid rgba(27,21,18,.09);border-bottom-width:1px;
  color:#4A403A;text-decoration:none;white-space:nowrap;
  transition:background .3s cubic-bezier(.32,.72,0,1), color .3s cubic-bezier(.32,.72,0,1),
             border-color .3s cubic-bezier(.32,.72,0,1)}
.top-bar a.wht-more{border-bottom:1px solid rgba(27,21,18,.09)}
.wht-more:hover,.wht-more:focus-visible{background:rgba(185,0,0,.07);color:#7A0B0B}
.top-bar a.wht-more:hover,.top-bar a.wht-more:focus-visible{border-color:rgba(185,0,0,.18)}

@media (prefers-reduced-motion:reduce){
  .wht-line{transition:none}
  .wht-ring{display:none}
}