/* Carefree Theme + Menu Engine V31.0.48 - message line styles. Linked only while the line is on for this visitor
   (header.php decides); every rule needs an html class that the head state script sets (crf-msg, and
   crf-msg-ph below 992px, crf-msg-fused when the server printed the group look for the account bar), so a
   stray load does nothing. Bump ?v= in header.php with every change. */

/* Stack total: line height + the old slots that still count at this width. Declared on html (for the html
   scroll padding) and on body (so slot values the old bars write on body still count). */
html.crf-msg, html.crf-msg > body { --crf-stack-top: var(--crf-msg-h, 0px); }
@media (min-width: 768px) {
    html.crf-msg, html.crf-msg > body { --crf-stack-top: calc(var(--crf-msg-h, 0px) + var(--crf-fs-h, 0px) + var(--crf-promo-h, 0px)); }
}
@media (min-width: 992px) {
    html.crf-msg, html.crf-msg > body { --crf-stack-top: calc(var(--crf-msg-h, 0px) + var(--crf-top-x, 0px) + var(--crf-fs-h, 0px) + var(--crf-promo-h, 0px) + var(--crf-ute-h, 49px) + var(--crf-nav-x, 0px)); }
}
/* >=992 the fixed account row and the stuck menu start under the line. More specific than any older owner
   copy of these two rules (html body nav#top), so the stack holds while those owners catch up; an owner copy
   that adds the line height itself gives the same number (each rule is a whole value, never added to). */
@media (min-width: 992px) {
    html.crf-msg body nav#top, html.crf-msg body #top { top: calc(var(--crf-msg-h, 0px) + var(--crf-top-x, 0px) + var(--crf-fs-h, 0px) + var(--crf-promo-h, 0px)) !important; }
    html.crf-msg body #menu.fixed-stacked-menu { top: var(--crf-stack-top, 0px) !important; }
}
/* Phones: the page starts under the line (no other top reserve exists below 768). */
@media (max-width: 767px) {
    html.crf-msg > body { padding-top: var(--crf-stack-top, 0px) !important; }
    html.crf-msg { scroll-padding-top: var(--crf-stack-top, 0px); }
}

/* The line */
#crf-msg-line { position: fixed; top: 0; left: 0; right: 0; z-index: 1049; height: auto; min-height: 34px; display: flex; align-items: stretch; margin: 0; padding: 0;
    box-sizing: border-box; overflow: hidden; font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; line-height: 18px;
    font-weight: 400; font-style: normal; text-transform: none; letter-spacing: normal; text-shadow: none; text-align: left; --crf-msg-in: 12px; }
html.crf-msg-n0 #crf-msg-line { display: none; }
@media (min-width: 768px) { #crf-msg-line { --crf-msg-in: calc((100vw - 750px) / 2 + 15px); } }
@media (min-width: 992px) { #crf-msg-line { --crf-msg-in: calc((100vw - 970px) / 2 + 15px); } }
@media (min-width: 1200px) { #crf-msg-line { --crf-msg-in: calc((100vw - 1170px) / 2 + 15px); } }
#crf-msg-line .crf-msg-half { position: relative; display: flex; align-items: center; flex: 1 1 50%; min-width: 0; box-sizing: border-box; padding: 4px 8px; }
#crf-msg-line .crf-msg-half[hidden] { display: none; }
#crf-msg-line .crf-msg-txt { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#crf-msg-line .crf-msg-txt b { font-weight: 700; color: inherit; }
/* an offer is never cut short: it wraps onto a second row and the line grows (the host measures it) */
#crf-msg-line .crf-msg-offer .crf-msg-txt { white-space: normal; overflow: visible; text-overflow: clip; line-height: 16px; overflow-wrap: break-word; }

/* Group half (left; 992px and up only when the account bar carries no group look): the site's pink accent
   unless the poster gives its own colours */
#crf-msg-line .crf-msg-grp { background: #fce4ee; color: #9c1450; justify-content: flex-start; padding-left: var(--crf-msg-in); }
#crf-msg-line .crf-msg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: currentColor; }
#crf-msg-line .crf-msg-logo { flex: none; display: block; height: 22px; width: auto; max-width: 140px; margin-right: 10px; }
#crf-msg-line .crf-msg-sfx { opacity: .92; }
#crf-msg-line .crf-msg-lnk { flex: none; margin-left: 12px; font-weight: 600; white-space: nowrap; }
#crf-msg-line .crf-msg-lnk a { color: inherit; text-decoration: underline; }
html.crf-msg-ph #crf-msg-line .crf-msg-sfx, html.crf-msg-ph #crf-msg-line .crf-msg-lnk { display: none; }

/* Offer: tone palettes (host-owned; a rich offer never takes poster colours) */
#crf-msg-line .crf-msg-offer { justify-content: flex-end; padding-right: var(--crf-msg-in); }
#crf-msg-line .crf-msg-t-fs { --crf-o-ink: #1f2937; --crf-o-bg1: #e9f1fe; --crf-o-bg2: #f4f8ff; --crf-o-line: rgba(37,99,235,.20); --crf-o-strong: #166534; --crf-o-info: #1d4ed8; --crf-o-trk: rgba(15,23,42,.10); --crf-o-lnk: #166534; --crf-o-fill: linear-gradient(90deg, #3b82f6, #22a05a); }
#crf-msg-line .crf-msg-t-celebrate { --crf-o-ink: #14532d; --crf-o-bg1: #e6f7ec; --crf-o-bg2: #f2fcf5; --crf-o-line: rgba(22,101,52,.22); --crf-o-strong: #166534; --crf-o-info: #1d4ed8; --crf-o-trk: rgba(22,101,52,.14); --crf-o-lnk: #166534; --crf-o-fill: #22a05a; }
#crf-msg-line .crf-msg-t-hire { --crf-o-ink: #3b2a31; --crf-o-bg1: #fbe6ee; --crf-o-bg2: #fef3f7; --crf-o-line: rgba(155,17,70,.20); --crf-o-strong: #3b2a31; --crf-o-info: #9b1146; --crf-o-trk: rgba(15,23,42,.10); --crf-o-lnk: #9b1146; --crf-o-fill: linear-gradient(90deg, #ec1a63, #1fa637); }
#crf-msg-line .crf-msg-t-fs, #crf-msg-line .crf-msg-t-celebrate, #crf-msg-line .crf-msg-t-hire { color: var(--crf-o-ink); background: linear-gradient(90deg, var(--crf-o-bg1), var(--crf-o-bg2) 50%, var(--crf-o-bg1)); box-shadow: inset 0 -1px 0 var(--crf-o-line); }
#crf-msg-line .crf-msg-t-group { background: #fce4ee; color: #9c1450; }
#crf-msg-line .crf-msg-t-none { background: #f5f5f5; color: #333; }
#crf-msg-line .crf-msg-bar { display: none; position: relative; flex: none; width: 90px; height: 4px; margin-left: 10px; border-radius: 2px; background: var(--crf-o-trk, rgba(0,0,0,.12)); }
#crf-msg-line .crf-msg-bar i { display: block; height: 100%; background: var(--crf-o-fill, currentColor); border-radius: 2px; }
html.crf-msg:not(.crf-msg-ph) #crf-msg-line .crf-msg-bar.crf-msg-on { display: block; }
#crf-msg-line .crf-msg-notch { position: absolute; top: -3px; width: 3px; height: 10px; box-sizing: border-box; background: #fff; border: 1px solid #b9c0cc; border-radius: 2px; }
#crf-msg-line .crf-msg-notch.crf-msg-hit { background: #1fa637; border-color: #1fa637; }
#crf-msg-line .crf-msg-x { flex: none; width: auto; height: auto; min-width: 0; margin: 0 -6px 0 6px; padding: 4px 6px; border: 0; border-radius: 0;
    background: transparent; color: inherit; opacity: .7; font-family: Arial, sans-serif; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: none; text-shadow: none; }
#crf-msg-line .crf-msg-x:hover, #crf-msg-line .crf-msg-x:focus { opacity: 1; }
/* the group row's x exists only below 992px */
html.crf-msg:not(.crf-msg-ph) #crf-msg-line .crf-msg-gx { display: none; }

/* Rich offer parts (A13): bold 600, good amount bold green, muted */
#crf-msg-line .crf-msg-rich .crf-msg-txt b { font-weight: 600; color: var(--crf-o-strong); }
#crf-msg-line .crf-msg-rich .crf-msg-txt b.crf-msg-g { font-weight: 700; color: #166534; }
#crf-msg-line .crf-msg-rich .crf-msg-txt .crf-msg-m { color: #9b1146; }
#crf-msg-line .crf-msg-rich .crf-msg-short { display: none; }
#crf-msg-line .crf-msg-lead { display: inline-block; vertical-align: -3px; margin-right: 4px; }
#crf-msg-line .crf-msg-info { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 0 0 -8px; padding: 0; border: 0; border-radius: 0;
    background: transparent; color: var(--crf-o-info); font-size: 15px; line-height: 1; cursor: pointer; box-shadow: none; text-shadow: none; }
#crf-msg-line .crf-msg-info:hover { color: #000; }
#crf-msg-line .crf-msg-info:focus { outline: 2px solid currentColor; outline-offset: -2px; }
#crf-msg-line .crf-msg-link { flex: none; display: inline-flex; align-items: center; white-space: nowrap; padding: 2px 11px; border: 1px solid var(--crf-o-lnk); border-radius: 999px;
    background: rgba(255,255,255,.55); color: var(--crf-o-lnk); font-size: 11.5px; font-weight: 600; line-height: 18px; text-decoration: none; }
#crf-msg-line .crf-msg-link:hover, #crf-msg-line .crf-msg-link:focus { background: #fff; color: var(--crf-o-lnk); text-decoration: none; }
#crf-msg-line .crf-msg-link .fa { margin-left: 5px; font-size: 9px; }
#crf-msg-line .crf-msg-link .crf-msg-lts, #crf-msg-line .crf-msg-link .crf-msg-ltm { display: none; }
#crf-msg-line .crf-msg-burst { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px; border-radius: 999px; background: #15803d; color: #fff; font-size: 11.5px;
    font-weight: 600; white-space: nowrap; max-width: 200px; overflow: hidden; animation: crf-msg-fold .5s ease 3.6s forwards; }
@keyframes crf-msg-fold { to { max-width: 0; padding: 0; margin: 0; opacity: 0; } }
@keyframes crf-msg-fade { to { opacity: 0; visibility: hidden; } }
@keyframes crf-msg-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes crf-msg-sweep { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { #crf-msg-line .crf-msg-burst { animation: none; } }
/* R23: text arriving in an empty offer row fades in (the row and its height are already there; the old text was
   removed at once, never faded out); the celebration pill keeps its own animation */
@keyframes crf-msg-fadein { from { opacity: 0; } to { opacity: 1; } }
#crf-msg-line .crf-msg-offer.crf-msg-fadein > *:not(.crf-msg-burst) { animation: crf-msg-fadein .16s ease-out both; }
@media (prefers-reduced-motion: reduce) { #crf-msg-line .crf-msg-offer.crf-msg-fadein > *:not(.crf-msg-burst) { animation: none; } }

/* One half only: an offer alone is centred, a group text alone keeps its left edge */
#crf-msg-line.crf-msg-solo .crf-msg-half { flex: 1 1 100%; }
#crf-msg-line.crf-msg-solo .crf-msg-offer { justify-content: center; padding-left: 40px; padding-right: 40px; }
#crf-msg-line.crf-msg-solo .crf-msg-offer .crf-msg-x { position: absolute; right: var(--crf-msg-in); top: 50%; transform: translateY(-50%); margin: 0; }

/* 992px and up, rich offer: [burst][lead parts info] [link] [bar 70 to 150] centred, gap 10, x at the right
   gutter. The bar starts at 70 and takes spare room up to 150, so it gives way before the text wraps; a text
   that still does not fit wraps and the line grows. */
html.crf-msg:not(.crf-msg-ph) #crf-msg-line .crf-msg-offer.crf-msg-rich { gap: 10px; flex-wrap: nowrap; font-size: 12.5px; line-height: 18px; padding-top: 3px; padding-bottom: 3px; }
html.crf-msg:not(.crf-msg-ph) #crf-msg-line.crf-msg-solo .crf-msg-offer.crf-msg-rich { padding-left: calc(var(--crf-msg-in) + 44px); padding-right: calc(var(--crf-msg-in) + 44px); }
html.crf-msg:not(.crf-msg-ph) #crf-msg-line .crf-msg-rich .crf-msg-txt { flex: 0 1 auto; line-height: 18px; }
html.crf-msg:not(.crf-msg-ph) #crf-msg-line .crf-msg-rich .crf-msg-bar.crf-msg-on { flex: 1 1 70px; width: auto; min-width: 70px; max-width: 150px; margin-left: 0; }
html.crf-msg:not(.crf-msg-ph) #crf-msg-line .crf-msg-plain .crf-msg-bar.crf-msg-on { margin-left: 10px; }
/* 992-1199px the link uses its middle label when the poster gave one (R11, R15); below 992 see further down */
@media (max-width: 1199px) {
    html.crf-msg:not(.crf-msg-ph) #crf-msg-line .crf-msg-link.crf-msg-htm .crf-msg-lt { display: none; }
    html.crf-msg:not(.crf-msg-ph) #crf-msg-line .crf-msg-link.crf-msg-htm .crf-msg-ltm { display: inline; }
}

/* An owner's plain message marked tap: its text opens the owner's own info (the host only sends crfmsg:tap) */
#crf-msg-line .crf-msg-tap { cursor: pointer; }
#crf-msg-line .crf-msg-tap:focus { outline: 2px solid currentColor; outline-offset: 1px; }

/* Below 992px (html class crf-msg-ph): offer row first, group row under it */
html.crf-msg-ph #crf-msg-line { flex-direction: column; font-size: 12px; }
html.crf-msg-ph #crf-msg-line .crf-msg-half { flex: 1 1 auto; min-height: 28px; justify-content: center; padding: 3px 34px; }
html.crf-msg-ph #crf-msg-line .crf-msg-offer .crf-msg-txt { text-align: center; }
html.crf-msg-ph #crf-msg-line .crf-msg-offer { order: 1; }
html.crf-msg-ph #crf-msg-line .crf-msg-grp { order: 2; }
html.crf-msg-ph #crf-msg-line .crf-msg-offer .crf-msg-x, html.crf-msg-ph #crf-msg-line .crf-msg-grp .crf-msg-gx { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; }
html.crf-msg-ph #crf-msg-line .crf-msg-logo { height: 17px; margin-right: 8px; }
/* the offer row is at least 38px, so its reserved row (first paint) and the posted text match */
html.crf-msg-ph #crf-msg-line .crf-msg-offer:not([hidden]) { min-height: 38px; }
/* touch targets, kept inside the line and inside their own row: each x is 44 wide and as tall as its row;
   a plain tap text fills its row under the x, so a press on an x never counts as a tap */
html.crf-msg-ph #crf-msg-line.crf-msg-line .crf-msg-offer .crf-msg-x, html.crf-msg-ph #crf-msg-line.crf-msg-line .crf-msg-grp .crf-msg-gx { top: 0; bottom: 0; right: 0; width: 44px; padding: 0; transform: none; z-index: 2; }
html.crf-msg-ph #crf-msg-line .crf-msg-offer .crf-msg-tap::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; }

/* Below 992px, rich offer: ONE row [lead short-parts][info][ ][short link][x 44]; the info keeps its own column
   beside the text (never wraps away from it); the bar is a 3px track along the row's bottom edge (notches 7px).
   12px text; a text that needs a second or third line grows the row (measured). */
html.crf-msg-ph #crf-msg-line .crf-msg-offer.crf-msg-rich:not([hidden]) { display: grid; grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr) auto 44px; align-items: center; column-gap: 0;
    min-height: 38px; padding: 0 0 3px 10px; box-sizing: border-box; justify-content: stretch; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-txt { grid-column: 1; grid-row: 1; align-self: center; padding: 2px 0; font-size: 12px; line-height: 15px; text-align: left; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-long.crf-msg-hs { display: none; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-short { display: inline; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-lead { margin-right: 3px; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-info { position: relative; grid-column: 2; grid-row: 1; width: 26px; height: 15px; margin: 0; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-info::after { content: ''; position: absolute; left: -9px; right: -9px; top: -12px; bottom: -12px; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-link { grid-column: 4; grid-row: 1; margin-left: 9px; min-height: 26px; min-width: 44px; box-sizing: border-box; justify-content: center; padding: 2px 9px; font-size: 11.5px; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-link .fa { margin-left: 4px; }
html.crf-msg-ph #crf-msg-line .crf-msg-link.crf-msg-hts .crf-msg-lt, html.crf-msg-ph #crf-msg-line .crf-msg-link .crf-msg-ltm { display: none; }
html.crf-msg-ph #crf-msg-line .crf-msg-link.crf-msg-hts .crf-msg-lts { display: inline; }
html.crf-msg-ph #crf-msg-line.crf-msg-line .crf-msg-rich .crf-msg-x { position: relative; grid-column: 5; grid-row: 1; align-self: stretch; top: auto; bottom: auto; right: auto; width: 44px; margin: 0; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-bar.crf-msg-on { display: block; position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 3px; margin: 0; border-radius: 0; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-bar i { border-radius: 0; }
html.crf-msg-ph #crf-msg-line .crf-msg-rich .crf-msg-notch { top: -4px; height: 7px; margin-left: -1px; }
/* below 992px the burst pill is not drawn (R14); the host never adds it there, and this hides one left over
   from a rotation */
html.crf-msg-ph #crf-msg-line .crf-msg-burst { display: none; }
/* one-time cue on the row when the step is reached (R14): solid green ~1.6s, white text and icons, tick pops,
   bar sweeps, then eases back to the celebrate palette over ~1s; no height change; none with reduced motion */
@media (prefers-reduced-motion: no-preference) {
    html.crf-msg-ph #crf-msg-line .crf-msg-rich { isolation: isolate; }
    html.crf-msg-ph #crf-msg-line .crf-msg-rich::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background: #15803d; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
    html.crf-msg-ph #crf-msg-line .crf-msg-rich.crf-msg-cue::before { opacity: 1; transition: none; }
    html.crf-msg-ph #crf-msg-line .crf-msg-rich * { transition: color 1s ease, background-color 1s ease, opacity 1s ease; }
    html.crf-msg-ph #crf-msg-line .crf-msg-rich.crf-msg-cue * { transition: none; color: #fff !important; }
    html.crf-msg-ph #crf-msg-line .crf-msg-rich.crf-msg-cue .crf-msg-link { border-color: #fff; background: transparent; }
    html.crf-msg-ph #crf-msg-line .crf-msg-rich.crf-msg-cue .crf-msg-lead { animation: crf-msg-pop .6s ease-out both; transform-origin: 50% 55%; }
    html.crf-msg-ph #crf-msg-line .crf-msg-rich.crf-msg-cue .crf-msg-lead * { stroke: #fff; }
    html.crf-msg-ph #crf-msg-line .crf-msg-rich.crf-msg-cue .crf-msg-bar { background: rgba(255,255,255,.28); }
    html.crf-msg-ph #crf-msg-line .crf-msg-rich.crf-msg-cue .crf-msg-bar i { background: #fff; animation: crf-msg-sweep 1.4s ease-out both; }
}

/* Account bar with the signed-in group look (992px and up, class crf-msg-fused from the head script; the
   server printed #crf-fbar-note into nav#top's row). nav#top keeps its height (--crf-ute-h, 49px): the stack
   maths is unchanged. Dropdowns stay white. Without this class the note stays hidden. */
@media (min-width: 992px) {
    html.crf-msg-fused body nav#top { background: var(--crf-fb-bg) !important; color: var(--crf-fb-fg); border: 0 !important; padding: 0 !important; min-height: 0 !important; height: var(--crf-ute-h, 49px); box-sizing: border-box; }
    html.crf-msg-fused body nav#top::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--crf-fb-acc); pointer-events: none; }
    html.crf-msg-fused body nav#top > .container { height: 100%; }
    html.crf-msg-fused body nav#top > .container > .row { display: flex; flex-wrap: nowrap; align-items: center; height: 100%; }
    html.crf-msg-fused body nav#top > .container > .row::before, html.crf-msg-fused body nav#top > .container > .row::after { display: none; }
    /* the note starts at the page column (row margin -15 + note padding 15) and its base width is [logo + who]
       only; the search column gives way first (174 down to 118), then the note (ellipsis on the name is the last
       resort; the search's shrink weight is large enough that the note loses no fraction of a pixel while the
       search can still give way); spare room goes to the note, where the suffix shows whole if it fits */
    html.crf-msg-fused body nav#top > .container > .row > .col-sm-3 { float: none; width: 174px; min-width: 118px; flex: 0 1000000 auto; margin-left: auto; padding: 0 0 0 14px; box-sizing: border-box; }
    html.crf-msg-fused body nav#top > .container > .row > .col-sm-3 #search { width: 100%; }
    html.crf-msg-fused body nav#top > .container > .row > #top-links { float: none !important; display: block; width: auto; flex: none; margin: 0; padding: 0 0 0 8px; }
    html.crf-msg-fused body nav#top #top-links ul.list-inline { margin: 0; white-space: nowrap; }
    html.crf-msg-fused body nav#top #crf-fbar-note.crf-fbar-note { display: flex !important; align-items: center; flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 4px 0 15px;
        color: var(--crf-fb-fg); font: 400 13px/18px 'Open Sans', Arial, sans-serif; text-transform: none; letter-spacing: normal; text-shadow: none; white-space: nowrap; overflow: hidden; }
    html.crf-msg-fused body nav#top #crf-fbar-note .crf-fbar-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--crf-fb-fg); }
    html.crf-msg-fused body nav#top #crf-fbar-note .crf-fbar-logo { flex: none; display: block; height: 22px; width: auto; max-width: 140px; margin-right: 8px; }
    /* one visible text line: [Signed in as NAME] first (the name takes an ellipsis only when it alone does not
       fit), then the suffix, which never shrinks: when it does not fit whole it wraps onto the hidden second
       line, so it shows whole or not at all, decided by the room there is (no script, no first-paint change) */
    html.crf-msg-fused body nav#top #crf-fbar-note .crf-fbar-txt { display: flex; flex-wrap: wrap; align-items: flex-start; flex: 1 1 auto; min-width: 0; height: 18px; overflow: hidden; }
    /* inside it the same rule once more: the name comes first (order -1 in a reversed row, reading order kept),
       "Signed in as" goes whole onto the hidden line before the name is ever cut */
    html.crf-msg-fused body nav#top #crf-fbar-note .crf-fbar-who { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0; height: 18px; overflow: hidden; }
    html.crf-msg-fused body nav#top #crf-fbar-note .crf-fbar-who b { display: block; order: -1; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: inherit; }
    html.crf-msg-fused body nav#top #crf-fbar-note .crf-fbar-pre { display: block; flex: 0 0 auto; white-space: pre; }
    /* the suffix box adds nothing to the note's base width (width 0, grows into spare room only); its text sits
       after a zero-width first item, so when it does not fit whole it wraps onto the hidden second line */
    html.crf-msg-fused body nav#top #crf-fbar-note .crf-fbar-sfx { display: flex; flex-wrap: wrap; align-items: flex-start; flex: 1 1 0px; width: 0; min-width: 0; height: 18px; overflow: hidden; white-space: pre; opacity: .92; }
    html.crf-msg-fused body nav#top #crf-fbar-note .crf-fbar-sfx::before { content: ''; flex: none; width: 0; height: 18px; }
    html.crf-msg-fused body nav#top #top-links a, html.crf-msg-fused body nav#top #top-links a:visited, html.crf-msg-fused body nav#top #top-links a:hover, html.crf-msg-fused body nav#top #top-links a:focus,
    html.crf-msg-fused body nav#top #top-links .fa, html.crf-msg-fused body nav#top #top-links .caret, html.crf-msg-fused body nav#top .btn-link { color: var(--crf-fb-fg) !important; }
    html.crf-msg-fused body nav#top #top-links a:hover, html.crf-msg-fused body nav#top #top-links a:focus { text-decoration: underline; }
    html.crf-msg-fused body nav#top #top-links ul.list-inline > li { border-color: var(--crf-fb-line) !important; }
    html.crf-msg-fused body nav#top a:focus, html.crf-msg-fused body nav#top button:focus { outline: 2px solid var(--crf-fb-fg); outline-offset: -2px; }
    html.crf-msg-fused body nav#top #top-links .dropdown-menu a { color: #252525 !important; text-decoration: none; }
    html.crf-msg-fused body nav#top #top-links .dropdown-menu a:hover, html.crf-msg-fused body nav#top #top-links .dropdown-menu a:focus { color: #ec008c !important; }
    html.crf-msg-fused body nav#top #search .form-control { background: transparent !important; border: 1px solid var(--crf-fb-line) !important; border-right: 0 !important; color: var(--crf-fb-fg) !important; box-shadow: none !important; }
    html.crf-msg-fused body nav#top #search .form-control::-webkit-input-placeholder { color: var(--crf-fb-fg); opacity: 1; }
    html.crf-msg-fused body nav#top #search .form-control::-moz-placeholder { color: var(--crf-fb-fg); opacity: 1; }
    html.crf-msg-fused body nav#top #search .form-control::placeholder { color: var(--crf-fb-fg); opacity: 1; }
    html.crf-msg-fused body nav#top #search .form-control:focus { border-color: var(--crf-fb-fg) !important; box-shadow: inset 0 0 0 1px var(--crf-fb-fg) !important; outline: 0; }
    html.crf-msg-fused body nav#top #search .input-group-btn { background: transparent !important; }
    /* the search may narrow to 104px: smaller side padding and 14px text so the Search placeholder stays whole */
    html.crf-msg-fused body nav#top #search .form-control { padding-left: 8px; padding-right: 6px; font-size: 14px; }
    html.crf-msg-fused body nav#top #search .btn { padding-left: 10px; padding-right: 10px; }
    html.crf-msg-fused body nav#top #search .btn { background: var(--crf-fb-btn) !important; border: 1px solid var(--crf-fb-btn) !important; color: var(--crf-fb-btn-ink) !important; box-shadow: none !important; text-shadow: none; }
    html.crf-msg-fused body nav#top #search .btn .fa { color: var(--crf-fb-btn-ink) !important; }
}
/* width step (R6): 992-1099 logo only when a logo passed, else no "Signed in as"; the suffix is decided by room */
@media (min-width: 992px) and (max-width: 1099px) {
    html.crf-msg-fused body nav#top #crf-fbar-note .crf-fbar-pre { display: none; }
    html.crf-msg-fused body nav#top #crf-fbar-note.crf-fbar-haslogo .crf-fbar-txt { display: none; }
    html.crf-msg-fused body nav#top #crf-fbar-note.crf-fbar-haslogo .crf-fbar-logo { margin-right: 0; }
}