/* NewsTickerBar (Shared.Ui/News, 2026-10-08) - the news ticker in the portal (docked at the foot of every page) and the
   CRM's live preview (inline). The rules for the strip itself moved here unchanged from the portal's app.css, which
   keeps only how its pages make room for it (body padding, the cards' heights). */

/* News ticker - mirrors the original breakingNews plugin (scroll, ~60px/s, recycle, controls) */
.news-ticker { display: flex; align-items: stretch; background: #fff; border: 1px solid #ce2525; border-radius: 2px; overflow: hidden; height: 2.5rem; line-height: 2.5rem; font-size: .875rem; }

/* Docked variant — fixed near the viewport bottom, lifted a few px off the edge so the red
   border shows on ALL sides (a flush bottom:0 would push the bottom border off-screen). */
.news-ticker-docked {
    position: fixed; left: .5rem; right: .5rem; bottom: .5rem; z-index: 1040;
    border: 2px solid #ce2525; border-radius: .1875rem;
    overflow: hidden;
    box-shadow: 0 2px .75rem rgba(0,0,0,.22);
}
.news-ticker-docked .news-label { border-radius: 1px 0 0 1px; }
/* NEWS label — identical to the original .bn-label: Open Sans, 14px, weight 700, no transform */
.news-label { background: #ce2525; color: #fff; font-family: 'Open Sans', sans-serif; font-size: .875rem; font-weight: 700; letter-spacing: normal; text-transform: none; display: flex; align-items: center; padding: 0 .9375rem; white-space: nowrap; }
/* Headlines centred top-to-bottom by flex, not line-height: the docked bar's 2px border left a 36px
   inside for a 40px line, so the text sat low (2026-10-05). */
.news-ticker-docked { line-height: normal; }
.news-scroll { overflow: hidden; flex: 1; position: relative; display: flex; align-items: center; }
.news-scroll ul { display: inline-flex; align-items: center; list-style: none; margin: 0; padding: 0; white-space: nowrap; will-change: transform; }
.news-scroll li { padding: 0 1.375rem; white-space: nowrap; }
.news-scroll a, .news-scroll .news-plain { color: #333; text-decoration: none; font-size: .9375rem; font-weight: 600; }   /* .news-plain: one of our own headlines with no link (2026-10-07) */
.news-scroll a:hover { color: #069; }
.news-controls { display: flex; }
.nc-btn { width: 2.125rem; border: none; border-left: 1px solid #eee; background: #f6f6f6; color: #999; cursor: pointer; font-size: .9375rem; line-height: 1; padding: 0; }
.nc-btn:hover { background: #eee; }

/* Tuck the ticker away (Steven, 2026-10-05): a thin red strip with a white ‹ at the ticker's FAR RIGHT
   hides it; a strip the same - thin, red, white › - then sits at the bottom LEFT, in the margin between the
   page edge and the content (the 24px gutter), and brings it back. The page grows into the space.
   NO JUMP: the tab is exactly the docked bar's outer height (40px - Bootstrap's border-box includes the
   border) and the open strip's look (16px of red plus the bar's 2px red border = 18px), on the same bottom
   line (8px), so nothing moves up or changes size between the two. The class is set on
   <html> before first paint (the portal's App.razor), so a hidden ticker never flashes up on page load. */
.nc-hide, .news-tab {
    width: 1rem; padding: 0; border: 0; background: #ce2525; color: #fff; cursor: pointer;
    font-size: 1rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.nc-hide:hover, .news-tab:hover { background: #a91d1d; }
.news-tab {
    display: none; position: fixed; left: .1875rem; bottom: .5rem; z-index: 1040;
    width: 1.125rem; height: 2.5rem; border-radius: .1875rem; box-shadow: 0 2px .75rem rgba(0,0,0,.22);
}
html.news-collapsed .news-ticker-docked { display: none; }
html.news-collapsed .news-host-docked .news-tab { display: flex; }

/* INLINE (the CRM's live preview, 2026-10-08): the docked bar's look, in the page and full width. Its tab sits where
   the bar starts, and tucking away is this one's alone ([data-tucked], set by news-ticker.js), never remembered. */
.news-host-inline { position: relative; min-height: 2.5rem; }
.news-ticker-inline { border: 2px solid #ce2525; border-radius: .1875rem; box-shadow: 0 2px .75rem rgba(0,0,0,.22); line-height: normal; }
.news-ticker-inline .news-label { border-radius: 1px 0 0 1px; }
.news-host-inline .news-tab { position: absolute; left: 0; top: 0; bottom: auto; z-index: 1; }
.news-host-inline[data-tucked] .news-ticker { display: none; }
.news-host-inline[data-tucked] .news-tab { display: flex; }

/* DAVIDSON HR NEWS (2026-10-08): the "Davidson HR" tag before its headline - a word on navy, never colour alone - and
   the headline that opens its story, which looks like any other headline. */
.news-ours { display: inline-block; margin-right: .5rem; padding: .1875rem .4375rem; border-radius: .1875rem; background: #08203d; color: #fff;
             font-size: .6875rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em; vertical-align: 2px; }
.news-open { border: 0; background: none; padding: 0; margin: 0; font-family: inherit; color: #333; font-size: .9375rem; font-weight: 600;
             line-height: inherit; cursor: pointer; white-space: nowrap; }
.news-open:hover { color: #069; }

/* THE POP-UP: one <dialog> per page, made by news-ticker.js - the headline, the picture, the story and Read more.
   Opened with showModal(), so it sits above everything (the docked bar too) and Esc closes it. */
.news-story { width: min(40rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 3rem); padding: 0; border: 0;
              border-radius: .75rem; box-shadow: 0 .75rem 2.5rem rgba(0,0,0,.35); background: #fff; color: #18223B; overflow: hidden; }
.news-story::backdrop { background: rgba(8, 32, 61, .55); }
.news-story [hidden] { display: none !important; }
.news-story-in { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); }
.news-story-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1rem 0 1.25rem; flex: 0 0 auto; }
.news-story-x { border: 0; background: none; color: #555; font-size: 1.125rem; line-height: 1; padding: .375rem .5rem; border-radius: .375rem; cursor: pointer; }
.news-story-x:hover { background: #f0f2f5; color: #18223B; }
.news-story-main { padding: .375rem 1.25rem .5rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.news-story-h { font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin: .25rem 0 .875rem; color: #18223B; }
.news-story-pic { display: block; max-width: 100%; max-height: 45vh; margin: 0 auto 1rem; border-radius: .5rem; object-fit: contain; }
.news-story-body p { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.news-story-foot { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; padding: .75rem 1.25rem 1rem; border-top: 1px solid #eef0f4; flex: 0 0 auto; }
.news-story-more, .news-story-close { display: inline-flex; align-items: center; gap: .375rem; padding: .4375rem .875rem; border-radius: .375rem; font-family: inherit;
                                      font-size: .875rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; }
.news-story-more { background: #08203d; color: #fff; border: 1px solid #08203d; }
.news-story-more:hover { background: #0c2f59; color: #fff; }
.news-story-close { background: #fff; color: #18223B; border: 1px solid #c8ccd4; }
.news-story-close:hover { background: #f0f2f5; }