.dnb-root{--bar-bg:#071a35;--bar-text:#fff;--h:54px;--fs:14px;--fw:600;--font:Arial;--ticker:13s;--cycle:5s;margin:0!important;padding:0!important;width:100%;position:relative;z-index:99999;background:var(--bar-bg);color:var(--bar-text);font:var(--fw) var(--fs)/1.15 var(--font)}.dnb-root{max-width:100vw;overflow:hidden}
.dnb-root.sticky{position:sticky;top:0;z-index:100000}
/* Sticky, stacked with the site's own header rather than fighting it.

   Both layouts pin their header at top:0 -- .site-header on the desktop pages,
   .app > .header on /m -- so a sticky bar at the same offset would sit on top
   of it and one of the two would vanish. The header is dropped by the bar's
   measured height instead, so the two pin as one block: bar, then masthead and
   nav, exactly as they sit unscrolled.

   --nb-h is published by news-bar.js and is 0 when the bar is not sticky, so
   these rules cost nothing in that case. This stylesheet is linked after the
   pages' own <style>, so at equal specificity these win on source order. */
.dnb-root.sticky ~ .site-header,
.dnb-root.sticky ~ .header{top:var(--nb-h,0px)}.dnb-bar{display:flex;width:100%;height:var(--h);overflow:hidden;background:var(--bar-bg);border-radius:var(--radius);box-shadow:var(--shadow)}.dnb-track{display:flex;flex:1 1 auto;min-width:0;width:100%;height:100%}
.dnb-item{--pad:14px;position:relative;display:flex;align-items:center;gap:9px;min-width:0;height:100%;padding:0 var(--pad);background:var(--item-bg,var(--bar-bg));color:var(--item-text,var(--bar-text));border-right:1px solid var(--item-border,var(--divider));font-family:var(--item-font,var(--font));font-size:var(--item-size,var(--fs));font-weight:var(--item-weight,var(--fw));text-decoration:none;overflow:hidden}.dnb-item.no-bg{background:transparent}.dnb-item.auto{flex:1 1 0}.dnb-item.fixed{flex:0 0 var(--item-width)}.dnb-item:only-child{flex:1 1 100%;width:100%}/* The title panel. A darker block behind the icon and label, the way this
   site's own breaking ticker sets its BREAKING chip against the bar.

   Translucent black rather than a second colour field: it darkens whatever
   the container's background happens to be, so it stays correct for a
   container that inherits the bar colour, one with its own, and any future
   theme -- with nothing to configure and nothing to keep in step. A
   transparent container is the exception; there is no colour of its own to
   deepen, and a dark block floating on the bar would read as a mistake. */
.dnb-tag{display:flex;flex:0 0 auto;align-items:center;align-self:stretch;gap:8px;background:#0000003d;margin-left:calc(var(--pad) * -1);padding:0 12px 0 var(--pad)}
.dnb-item.no-bg .dnb-tag{background:none}
.dnb-label{flex:0 0 auto;color:var(--highlight);font-weight:800;white-space:nowrap;letter-spacing:.6px}.dnb-icon{flex:0 0 auto}.dnb-value{position:relative;display:block;flex:1;min-width:0;align-self:stretch;overflow:hidden}.dnb-static{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap}
/* Live values (weather, currency) sit centred in the container rather than
   starting hard against the label. Custom text stays left-aligned.

   "safe" matters: a plain centred flex line that is wider than its box
   overflows equally at BOTH ends and .dnb-value clips both, so a full
   weather reading lost its leading "31." as well as its trailing digits.
   Safe alignment falls back to flex-start the moment it would overflow,
   so the value centres while it fits and truncates only at the end when
   it does not. The unprefixed line is the fallback for older engines. */
.dnb-center{justify-content:center;justify-content:safe center}.ticker-track{position:absolute;top:50%;width:max-content;white-space:nowrap;will-change:transform,left,right}.dir-left .ticker-track{left:100%;animation:tleft var(--ticker) linear infinite}.dir-right .ticker-track{right:100%;animation:tright var(--ticker) linear infinite}@keyframes tleft{from{transform:translate(0,-50%)}to{transform:translate(-200%,-50%)}}@keyframes tright{from{transform:translate(0,-50%)}to{transform:translate(200%,-50%)}}.face{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;will-change:transform,opacity}.face.back{opacity:0}.motion-slide.dir-up .front{animation:upf var(--cycle) ease-in-out infinite}.motion-slide.dir-up .back{animation:upb var(--cycle) ease-in-out infinite}.motion-slide.dir-down .front{animation:downf var(--cycle) ease-in-out infinite}.motion-slide.dir-down .back{animation:downb var(--cycle) ease-in-out infinite}.motion-slide.dir-left .front{animation:leftf var(--cycle) ease-in-out infinite}.motion-slide.dir-left .back{animation:leftb var(--cycle) ease-in-out infinite}.motion-slide.dir-right .front{animation:rightf var(--cycle) ease-in-out infinite}.motion-slide.dir-right .back{animation:rightb var(--cycle) ease-in-out infinite}.motion-flip .front{animation:flipf var(--cycle) infinite}.motion-flip .back{animation:flipb var(--cycle) infinite}@keyframes upf{0%,42%{transform:translateY(0);opacity:1}52%,92%{transform:translateY(-120%);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes upb{0%,42%{transform:translateY(120%);opacity:0}52%,92%{transform:translateY(0);opacity:1}100%{transform:translateY(120%);opacity:0}}@keyframes downf{0%,42%{transform:translateY(0);opacity:1}52%,92%{transform:translateY(120%);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes downb{0%,42%{transform:translateY(-120%);opacity:0}52%,92%{transform:translateY(0);opacity:1}100%{transform:translateY(-120%);opacity:0}}@keyframes leftf{0%,42%{transform:translateX(0);opacity:1}52%,92%{transform:translateX(-110%);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes leftb{0%,42%{transform:translateX(110%);opacity:0}52%,92%{transform:translateX(0);opacity:1}100%{transform:translateX(110%);opacity:0}}@keyframes rightf{0%,42%{transform:translateX(0);opacity:1}52%,92%{transform:translateX(110%);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes rightb{0%,42%{transform:translateX(-110%);opacity:0}52%,92%{transform:translateX(0);opacity:1}100%{transform:translateX(-110%);opacity:0}}@keyframes flipf{0%,42%{transform:rotateX(0);opacity:1}52%,92%{transform:rotateX(90deg);opacity:0}100%{transform:rotateX(0);opacity:1}}@keyframes flipb{0%,42%{transform:rotateX(-90deg);opacity:0}52%,92%{transform:rotateX(0);opacity:1}100%{transform:rotateX(-90deg);opacity:0}}.motion-blink{animation:blink 1s steps(2) infinite}.motion-pulse{animation:pulse 1.3s infinite}.motion-vibrate{animation:vibrate .38s infinite}.motion-glow{animation:glow 1.3s alternate infinite}@keyframes blink{50%{opacity:.25}}@keyframes pulse{50%{filter:brightness(1.4)}}@keyframes vibrate{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}@keyframes glow{to{box-shadow:inset 0 0 22px currentColor}}/* Responsive.

   Two mobile modes, chosen in the studio. "scroll" keeps the bar one row high
   and lets it swipe sideways; "wrap" lets containers fall onto further rows.
   Below each breakpoint the padding, gap and minimum container width come down
   together -- dropping only min-width left the icon, label and value fighting
   over 170px with 14px of padding still on each side. */
@media(max-width:900px){
    .dnb-item{--pad:11px;gap:7px}
    .scroll .dnb-item.auto{flex:0 0 max-content;min-width:230px}
    .wrap .dnb-item{height:var(--h);flex:1 1 230px}
}
@media(max-width:720px){
    /* height:auto + min-height, not a fixed height: overflow-x:auto puts the
       scrollbar INSIDE the box, so a fixed 54px bar gave its containers 44 and
       squashed the text. The bar grows by the scrollbar instead, and the
       containers keep the height that was asked for. */
    .dnb-bar.scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;height:auto;min-height:var(--h)}
    .scroll .dnb-item{height:var(--h)}
    .dnb-bar.wrap{height:auto;flex-wrap:wrap}
    .wrap .dnb-item{height:var(--h);flex:1 1 240px}
    /* Last container in a wrapped row has no neighbour to be divided from. */
    .wrap .dnb-item:last-child{border-right:0}
    .scroll .dnb-item.auto{flex:0 0 max-content;min-width:210px}
    .dnb-item{--pad:10px;gap:6px}
}
/* Phone, wrap mode: one small row, one section at a time.

   A row of four containers on a 412px screen shows one and a half of them and
   hides the rest behind a swipe nobody makes. Stacking them two-up fixed the
   reading but cost four rows of height at the top of a news page, which is the
   worst trade on a phone. So the row stays one row and the containers take
   turns in it: each gets the full width of the screen, is readable in full,
   and steps aside for the next one on its own.

   Same palette, same title chips, same type -- only one container is on screen
   at a time. The step is driven by --slide, set by news-bar.js; the widths and
   the transform live here, so the layout is still decided by this breakpoint
   and nothing moves on desktop.

   Scroll mode is untouched: it stays a swipeable row for anyone who wants to
   drive it by hand. That is what the Mobile mode setting chooses between. */
@media(max-width:480px){
    .dnb-item{--pad:10px;gap:5px;font-size:calc(var(--item-size,var(--fs)) - 1px)}
    .scroll .dnb-item.auto{min-width:175px}
    .scroll .dnb-item.fixed{flex:0 0 auto;max-width:100%}

    /* Slimmer than the configured height. One container at a time needs less
       room than four side by side, and every pixel here is pinned to the top
       of a phone for the whole visit. The floor stops a small configured
       height from collapsing the row. --nb-h is measured, not read from the
       setting, so the sticky header drops by this reduced height too. */
    .dnb-bar.wrap{display:block;height:max(30px,calc(var(--h) - 9px));overflow:hidden}
    .wrap .dnb-track{width:max-content;transform:translateX(calc(var(--slide,0) * -100vw));transition:transform .45s ease}
    /* Exactly one screen each, auto width and fixed width alike: on a slider
       both mean the same thing, and a container narrower than the phone would
       leave the next one showing at the edge. */
    .wrap .dnb-item,.wrap .dnb-item.auto,.wrap .dnb-item.fixed{flex:0 0 100vw;width:100vw;height:100%}
    /* Nothing to take turns with: it just fills the row. */
    .wrap .dnb-item:only-child{flex:1 1 100vw}
}
/* The slide still happens, without the travel. Turning the whole thing off
   would strand the reader on whichever container was showing. */
@media(prefers-reduced-motion:reduce){
    .wrap .dnb-track{transition:none}
}

/* A lone container fills the whole bar at every width -- the one rule the
   original README states outright, and the one the breakpoints above would
   otherwise break. Those set an explicit flex basis on .auto items, which
   matches :only-child on specificity and sits later in the sheet, so on a
   phone a single container stopped around 45% with the bar background showing
   beside it and its divider stranded in the middle of nothing. Declared last
   so it wins on source order, with no !important needed. And a container with
   no neighbour has nothing to be divided from. */
.dnb-bar .dnb-item:only-child{flex:1 1 100%;width:100%;min-width:0;border-right:0}

@media(prefers-reduced-motion:reduce){.dnb-root *{animation:none!important}}