/* Slim announcement bar. Own classes so it does not depend on the
   stacked holiday-banner rules (including the navy/gold tweak on PR 1012).
   The bar is navy. The chip is brand gold with midnight ink: navy #27277C
   on that gold is 4.34:1 at 12px, under WCAG AA. Midnight #100A4A on the
   same gold is 6.2:1. */

.jfsd-annbar{
  --ann-bg:#27277C;
  --ann-fg:#fff;
  --ann-chip-bg:#B49355;
  --ann-chip-fg:#100A4A;
  --ann-link:#fff;
  position:relative;
  display:flex;
  align-items:stretch;
  background:var(--ann-bg);
  color:var(--ann-fg);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none;
  overflow:hidden;
}
/* display:flex on .jfsd-annbar beats the hidden attribute, so a practice
   bar that should be off was still painted. */
.jfsd-annbar[hidden]{display:none!important}
.jfsd-annbar--public{
  --ann-bg:#27277C;
  --ann-chip-bg:#B49355;
  --ann-chip-fg:#100A4A;
  --ann-link:#fff;
}
#staff-holiday-banner.staff-holiday-banner,
#staff-update-banner.staff-update-banner{
  background:#27277C;
  color:#fff;
  /* Do not pad the top. safe-area.css offsets the body so this navy box
     starts below the status bar instead of painting under the clock. */
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  font-size:14px;
  line-height:1.35;
  text-transform:none;
  letter-spacing:0;
  font-family:var(--font-display);
}
#staff-holiday-banner.staff-holiday-banner[data-holiday="soft"]{background:#27277C;color:#fff}
#announceBar.announce-bar{background:transparent;padding:0}
#announceBar.announce-bar .jfsd-annbar{width:100%}

.jfsd-annbar-clip{flex:1 1 auto;min-width:0}
.jfsd-annbar-stage{position:relative;overflow:hidden;transition:height .45s ease}
.jfsd-annbar-slide{
  transition:transform .45s ease,opacity .45s ease;
}
.jfsd-annbar-slide.is-current{position:relative;transform:translateY(0);opacity:1}
.jfsd-annbar-slide.is-off,
.jfsd-annbar-slide.is-leave,
.jfsd-annbar-slide.is-move{
  position:absolute;left:0;right:0;top:0;
  pointer-events:none;
}
.jfsd-annbar-slide.is-off{transform:translateY(100%);opacity:0}
.jfsd-annbar-slide.is-leave{transform:translateY(-100%);opacity:0}
.jfsd-annbar.is-reduced .jfsd-annbar-stage,
.jfsd-annbar.is-reduced .jfsd-annbar-slide{transition:none}
@media (prefers-reduced-motion:reduce){
  .jfsd-annbar,.jfsd-annbar-stage,.jfsd-annbar-slide{transition:none!important}
}

.jfsd-annbar-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 12px 0 16px;
  line-height:1.35;
}
.jfsd-annbar-copy{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.jfsd-annbar-label,
.jfsd-annbar-msg,
.jfsd-annbar-count{
  display:inline;
  margin:0;
  vertical-align:baseline;
}
.jfsd-annbar-label{margin-right:8px}
.jfsd-annbar-label{
  display:inline-block;
  vertical-align:baseline;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  line-height:1.3;
  background:var(--ann-chip-bg);
  color:var(--ann-chip-fg);
  border-radius:999px;
  padding:2px 8px;
}
.jfsd-annbar-msg{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none;
}
.jfsd-annbar-count{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:0;
  white-space:nowrap;
  vertical-align:baseline;
  font-variant-numeric:tabular-nums;
}
.jfsd-annbar-cta{
  display:inline-flex;
  align-items:center;
  flex:none;
  gap:4px;
  margin:0;
  min-height:0;
  padding:0 2px;
  border:0;
  background:none;
  color:var(--ann-link);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  white-space:nowrap;
}
.jfsd-annbar-cta:hover{color:#fff}
.jfsd-annbar-arrow{display:inline-flex}
.jfsd-annbar-more{
  display:block;
  padding:0 16px 8px;
  font-size:14px;
  font-weight:400;
  line-height:1.4;
}
.jfsd-annbar-more[hidden]{display:none!important}
.jfsd-annbar-count[hidden]{display:none!important}

.jfsd-annbar-controls{
  display:flex;
  align-items:center;
  flex:none;
  padding-right:6px;
}
.jfsd-annbar-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin:0;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-family:var(--font-display);
  text-transform:none;
}
.jfsd-annbar-x{width:44px;height:44px;min-width:44px;min-height:44px}
.jfsd-annbar-btn:hover{background:rgba(255,255,255,.14)}
.jfsd-annbar-btn:focus-visible,
.jfsd-annbar-cta:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}
.jfsd-annbar-ring{display:block}
.jfsd-annbar-ring circle{fill:none;stroke:currentColor;stroke-width:1.75}
.jfsd-annbar-ring .track{opacity:.35}
.jfsd-annbar-ring .fill{
  stroke-dasharray:43.98;
  stroke-dashoffset:43.98;
  transform:rotate(-90deg);
  transform-origin:10px 10px;
}
@media (max-width:700px){
  /* One line. The message ellipsizes. The link and Dismiss stay on that
     row. Their 44px targets are hit area, so the bar stays 44px tall. */
  .jfsd-annbar{flex-wrap:nowrap;align-items:center}
  #announceBar.announce-bar,
  #staff-holiday-banner.staff-holiday-banner{padding-bottom:0;padding-left:0;padding-right:0}
  .jfsd-annbar-clip{flex:1 1 auto;min-width:0}
  .jfsd-annbar-stage:not(:has(.jfsd-annbar-more:not([hidden]))){
    height:44px!important;
    max-height:48px;
  }
  .jfsd-annbar-row{
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
    height:44px;
    min-height:44px;
    max-height:48px;
    padding:0 0 0 12px;
  }
  .jfsd-annbar-copy{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
  }
  .jfsd-annbar-label,
  .jfsd-annbar-count{flex:none;margin-right:0}
  .jfsd-annbar-msg{
    display:block;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .jfsd-annbar-controls{flex:none;align-items:center;height:44px;padding:0}
  .jfsd-annbar [data-annbar-prev],
  .jfsd-annbar [data-annbar-next],
  .jfsd-annbar [data-annbar-play]{display:none}
  .jfsd-annbar-x,
  .jfsd-annbar .staff-holiday-dismiss{
    position:relative;
    box-sizing:border-box;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    font-size:22px;
    line-height:1;
  }
  .jfsd-annbar-cta{
    position:relative;
    flex:none;
    min-height:0;
    padding:0 4px;
    line-height:1.2;
  }
  .jfsd-annbar-cta::before,
  .jfsd-annbar-x::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:max(100%,44px);
    height:44px;
    transform:translate(-50%,-50%);
  }
}

.jfsd-annbar-sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* The way back after an X (Sharon, 2 Oct 2026: "what happens if i want to
   bring it back?"). The bar folds away and a quiet announcements control
   arrives where it does not compete with Donate. It is a real button; a
   tap clears those ids and opens the bar again. */
.jfsd-annbar-reopen[hidden]{display:none!important}
.jfsd-annbar-reopen{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  cursor:pointer;
  font-family:var(--font-display);
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
}
.jfsd-annbar-reopen-ic{display:block;flex:none}

/* Public, desktop: the right end of the utility bar. */
.ubar .jfsd-annbar-reopen--ubar{
  min-height:28px;
  padding:3px 12px 3px 10px;
  border:1px solid rgba(210,233,255,.55);
  border-radius:999px;
  background:transparent;
  color:#D2E9FF;
  font-size:.8125rem;
  font-weight:600;
  line-height:1.2;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.ubar .jfsd-annbar-reopen--ubar .jfsd-annbar-reopen-ic{width:15px;height:15px}
.ubar .jfsd-annbar-reopen--ubar:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.ubar .jfsd-annbar-reopen--ubar:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Public, phone: the menu, above the utility links it already carries. */
.m-drawer .jfsd-annbar-reopen--drawer{
  width:100%;
  min-height:44px;
  gap:8px;
  padding:7px 4px;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--blue);
  font-size:.9375rem;
  font-weight:600;
  line-height:1.2;
  text-align:left;
}
.m-drawer .jfsd-annbar-reopen--drawer .jfsd-annbar-reopen-ic{width:18px;height:18px}
.m-drawer .jfsd-annbar-reopen--drawer:hover{background:rgba(30,62,175,.07)}
.m-drawer .jfsd-annbar-reopen--drawer:focus-visible{outline:3px solid #1C88ED;outline-offset:2px}

/* Back Office: the hub top bar, beside Get help, in its tokens so it
   follows Light and Dark. Icon only on a phone, with the words kept for
   screen readers in the label. */
body[data-staff-only] #mbar .jfsd-annbar-reopen--mbar{
  flex:none;
  height:38px;
  min-height:38px;
  padding:0 var(--hub-space-3,.75rem);
  gap:var(--hub-space-2,.5rem);
  border:1px solid var(--hub-border);
  border-radius:12px;
  background:var(--hub-surface);
  color:var(--hub-foreground);
  font-size:var(--hub-text-sm,.875rem);
  font-weight:400;
  transition:background-color .15s ease,border-color .15s ease;
}
body[data-staff-only] #mbar .jfsd-annbar-reopen--mbar .jfsd-annbar-reopen-ic{width:18px;height:18px}
body[data-staff-only] #mbar .jfsd-annbar-reopen--mbar:hover{background:var(--hub-surface-muted);border-color:var(--hub-border-strong)}
body[data-staff-only] #mbar .jfsd-annbar-reopen--mbar:focus-visible{outline:3px solid var(--hub-accent);outline-offset:2px}
@media (max-width:1100px){
  body[data-staff-only] #mbar .jfsd-annbar-reopen--mbar{width:38px;min-width:38px;padding:0;justify-content:center}
  body[data-staff-only] #mbar .jfsd-annbar-reopen--mbar .jfsd-annbar-reopen-t{
    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}

/* A narrow phone had no room for one more 38px tool: the account face
   slid past the right gutter. While the control shows, the gaps and the
   icon tools tighten a little so the row still fits at 361px. */
@media (max-width:420px){
  body[data-staff-only] #mbar:has(.jfsd-annbar-reopen--mbar:not([hidden])){gap:4px}
  body[data-staff-only] #mbar .mbar-tools:has(> .jfsd-annbar-reopen--mbar:not([hidden])){gap:4px}
  body[data-staff-only] #mbar .mbar-tools:has(> .jfsd-annbar-reopen--mbar:not([hidden])) .mbar-get-help{padding:0 8px}
  body[data-staff-only] #mbar .mbar-tools:has(> .jfsd-annbar-reopen--mbar:not([hidden])) :is(.mbar-icon,.hiw-btn.hiw-in-chrome,.jfsd-annbar-reopen--mbar){width:36px;min-width:36px;height:36px;min-height:36px}
}

/* Arrival: the control rises in as the bar folds away. */
.jfsd-annbar-reopen.is-arriving{animation:jfsd-annbar-arrive .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes jfsd-annbar-arrive{
  0%{opacity:0;transform:translateY(-8px) scale(.86)}
  60%{opacity:1;transform:translateY(1px) scale(1.04)}
  100%{opacity:1;transform:none}
}
/* Phone: the menu button pulses once, because the way back is in the menu. */
.m-burger.jfsd-annbar-nudge{animation:jfsd-annbar-nudge .8s cubic-bezier(.2,.8,.2,1) both;border-radius:8px}
@keyframes jfsd-annbar-nudge{
  0%{transform:none;box-shadow:0 0 0 0 rgba(28,136,237,.55)}
  35%{transform:scale(1.12);box-shadow:0 0 0 6px rgba(28,136,237,.25)}
  100%{transform:none;box-shadow:0 0 0 12px rgba(28,136,237,0)}
}
@media (prefers-reduced-motion:reduce){
  .jfsd-annbar-reopen.is-arriving,.m-burger.jfsd-annbar-nudge{animation:none}
}
html[data-motion="reduce"] .jfsd-annbar-reopen.is-arriving,
html[data-motion="reduce"] .m-burger.jfsd-annbar-nudge{animation:none}

/* A restored bar takes focus so a keyboard or screen reader lands on it. */
.jfsd-annbar:focus{outline:none}
.jfsd-annbar:focus-visible{outline:2px solid #fff;outline-offset:-4px}