/* ==========================================================================
   Site notice bar and modal (2026-10-25). Markup: common/tpl_ninestar_notice.php,
   behaviour: jscript/jscript_ninestar_notice.js.

   Same file, same class names on theme-bahai; ONLY the colour tokens in the first block
   differ. Everything below that block is identical, so keep it that way.

   Load order: the loader emits style*.css alphabetically, so this sheet comes after
   stylesheet_zz_9star.css and stylesheet_zz_9star_m_*.css ('_notice' sorts after '_m_').
   Every rule is scoped to .ns-notice / .ns-notice-dialog / html.ns-notice-open, so nothing
   else on the page can be touched and, with no notice, none of this matches anything.

   The bar is NOT sticky: it is the first thing in <body> and scrolls away. The phone top
   bar (.ns-top) is sticky below it and docks to the top once the bar has gone.
   ========================================================================== */

/* Bahai Music Store: dark sage over the olive menu bar (tokens from stylesheet_zz_9star_m_shell.css:
   --m-brand #4f665a, --m-brand-ink, the hover #435a4e, --m-ink, --m-ink-2, --m-line, --m-surface-2).
   The letter: white letterhead with the star-and-wordmark mark centred over an olive rule, then
   a book serif on white paper (Iowan Old Style on Apple devices, Palatino on Windows, Georgia
   elsewhere), the same family as the wordmark's classical capitals. No webfonts.
   Contrast (WCAG AA needs 4.5:1 for text): each pair is noted on its line. */
:root {
  --nsn-bar-bg: #4f665a;          /* dark sage */
  --nsn-bar-ink: #ffffff;         /* white on sage: 6.2:1 */
  --nsn-bar-hover: rgb(0 0 0 / .16);      /* white on the hovered x: 7.6:1 */
  --nsn-chip-bg: #ffffff;         /* the "Read" pill: 6.2:1 against the bar */
  --nsn-chip-ink: #4f665a;        /* sage on white: 6.2:1 */
  --nsn-focus-bar: #ffffff;       /* focus ring on the bar: 6.2:1 */

  --nsn-panel-bg: #ffffff;
  --nsn-panel-clear: rgb(255 255 255 / 0);
  --nsn-panel-ink: #33382f;       /* 12.0:1 on white */
  --nsn-panel-muted: #666a63;     /* signature role line, the x: 5.5:1 */
  --nsn-edge: rgb(61 82 71 / .16);        /* scroll shadow at the text's edges */
  --nsn-shadow: rgb(30 45 38 / .5);
  --nsn-shadow-near: rgb(30 45 38 / .14);
  --nsn-backdrop: rgb(34 46 40 / .58);

  --nsn-head-bg: #ffffff;         /* letterhead: plain paper */
  --nsn-head-ink: #666a63;        /* the x: 5.5:1 */
  --nsn-head-ink-hover: #33382f;
  --nsn-head-hover: #eff3ec;      /* ink on it: 10.7:1 */
  --nsn-head-rule: #a4a87e;       /* olive rule: the menu bar's colour (decorative) */
  --nsn-head-focus: #4f665a;      /* 6.2:1 */
  --nsn-head-align: center;
  --nsn-head-pad: 60px;           /* same as the x side, so the mark sits in the middle */
  --nsn-head-pad-sm: 56px;
  --nsn-head-h: 84px;
  --nsn-head-h-sm: 72px;
  --nsn-mark-h: 52px;
  --nsn-mark-h-sm: 44px;

  --nsn-title-font: 400 29px/1.22 "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --nsn-title-size-sm: 25px;
  --nsn-title-track: 0;
  --nsn-title-ink: #3d5247;       /* 8.4:1 */
  --nsn-title-align: center;
  --nsn-title-dash: block;

  --nsn-text-font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --nsn-text-size: 18px;
  --nsn-text-size-sm: 17px;
  --nsn-text-lh: 1.65;
  --nsn-lede-ink: #3d5247;        /* 8.4:1 */
  --nsn-lede-size: 21px;
  --nsn-lede-size-sm: 19.5px;
  --nsn-lede-style: italic;
  --nsn-lede-weight: 400;
  --nsn-strong-ink: #2d3e35;
  --nsn-note-bg: #eff3ec;         /* sage tint: text 10.7:1, link 5.5:1 */
  --nsn-note-rule: #4f665a;
  --nsn-signoff-style: italic;
  --nsn-sign-font: italic 400 30px/1.3 "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --nsn-sign-ink: #3d5247;        /* 8.4:1 */
  --nsn-role-font: 400 15px/1.5 "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --nsn-link: #4f665a;            /* the brand as text on white: 6.2:1 */
  --nsn-link-hover: #33382f;
  --nsn-btn-bg: #4f665a;          /* Close button */
  --nsn-btn-ink: #ffffff;         /* 6.2:1 */
  --nsn-btn-hover: #435a4e;       /* white on it: 7.5:1 */
  --nsn-focus: #4f665a;           /* focus ring on the paper: 6.2:1 */
}

/* ------------------------------------------------------------------ the bar */
.ns-notice {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);   /* a notched phone on its side */
  background: var(--nsn-bar-bg);
  color: var(--nsn-bar-ink);
  font: 600 14px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.ns-notice[hidden] { display: none; }
.ns-notice *,
.ns-notice *::before,
.ns-notice *::after { box-sizing: border-box; }

/* the line itself: one button across the bar, ellipsis when it does not fit */
.ns-notice .ns-notice__open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0 8px 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ns-notice button.ns-notice__open { cursor: pointer; }
.ns-notice .ns-notice__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ns-notice button.ns-notice__open:hover .ns-notice__text { text-decoration: underline; text-underline-offset: 3px; }

/* "Read": always visible, so it survives the ellipsis on a phone */
.ns-notice .ns-notice__read {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--nsn-chip-bg);
  color: var(--nsn-chip-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

/* the x: hide the bar for this visitor */
.ns-notice .ns-notice__close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ns-notice .ns-notice__close:hover { background: var(--nsn-bar-hover); }
.ns-notice .ns-notice__close svg { display: block; width: 14px; height: 14px; }

.ns-notice :is(.ns-notice__open, .ns-notice__close):focus-visible {
  outline: 2px solid var(--nsn-focus-bar);
  outline-offset: -4px;
}

/* wide screens: balance the x on the right so the line sits in the middle of the bar */
@media (min-width: 700px) {
  .ns-notice .ns-notice__open { padding-left: 44px; }
}

/* ---------------------------------------------------------------- the modal */
/* A letter on the store's letterhead: a band with the store's mark and the x, then the title
   and the message on plain paper (they scroll together; the band and Close stay put), with a
   soft shadow at the top or bottom edge of the text while there is more to scroll.
   .ns-notice-dialog--letter (the built-in message only) adds the opening line, the help
   paragraph as a tinted note, the sign-off and the signature (name large, role small). */
html.ns-notice-open {
  overflow: hidden;
  padding-right: var(--nsn-sbw, 0px);
}

.ns-notice-dialog {
  box-sizing: border-box;
  width: min(600px, calc(100% - 24px));
  max-width: 600px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--nsn-panel-bg);
  color: var(--nsn-panel-ink);
  font: 400 var(--nsn-text-size)/var(--nsn-text-lh) var(--nsn-text-font);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  box-shadow: 0 32px 80px -24px var(--nsn-shadow), 0 2px 8px var(--nsn-shadow-near);
  overflow: hidden;
}
.ns-notice-dialog[open] { display: flex; flex-direction: column; }
.ns-notice-dialog::backdrop {
  background: var(--nsn-backdrop);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.ns-notice-dialog *,
.ns-notice-dialog *::before,
.ns-notice-dialog *::after { box-sizing: border-box; }

.ns-notice-dialog .ns-notice-dialog__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* the letterhead */
.ns-notice-dialog .ns-notice-dialog__head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: var(--nsn-head-align);
  min-height: var(--nsn-head-h);
  padding: 12px 60px 12px var(--nsn-head-pad);
  background: var(--nsn-head-bg);
  border-bottom: 3px solid var(--nsn-head-rule);
}
.ns-notice-dialog .ns-notice-dialog__mark {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--nsn-mark-h);
  margin: 0;
  padding: 0;
  border: 0;
}
.ns-notice-dialog .ns-notice-dialog__brand {
  color: var(--nsn-head-ink);
  font: 700 15px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .02em;
}
.ns-notice-dialog .ns-notice-dialog__x {
  position: absolute;
  top: 50%;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nsn-head-ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.ns-notice-dialog .ns-notice-dialog__x:hover { background: var(--nsn-head-hover); color: var(--nsn-head-ink-hover); }
.ns-notice-dialog .ns-notice-dialog__x svg { display: block; width: 16px; height: 16px; }

/* the paper: title and message scroll together (scroll shadows: the two covers move with the
   text, the two shadows stay at the edges, so a shadow shows only where more text is hidden) */
.ns-notice-dialog .ns-notice-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 32px 44px 12px;
  background:
    linear-gradient(var(--nsn-panel-bg) 30%, var(--nsn-panel-clear)) center top / 100% 44px no-repeat local,
    linear-gradient(var(--nsn-panel-clear), var(--nsn-panel-bg) 70%) center bottom / 100% 44px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--nsn-edge), transparent) center top / 100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--nsn-edge), transparent) center bottom / 100% 14px no-repeat scroll,
    var(--nsn-panel-bg);
}

.ns-notice-dialog .ns-notice-dialog__title {
  margin: 0 0 22px;
  padding: 0;
  color: var(--nsn-title-ink);
  font: var(--nsn-title-font);
  letter-spacing: var(--nsn-title-track);
  text-align: var(--nsn-title-align);
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.ns-notice-dialog .ns-notice-dialog__title::after {
  content: "";
  display: var(--nsn-title-dash);
  width: 44px;
  height: 2px;
  margin: 18px auto 0;
  background: var(--nsn-head-rule);
}
.ns-notice-dialog .ns-notice-dialog__title:focus { outline: none; }

.ns-notice-dialog .ns-notice-dialog__text {
  color: var(--nsn-panel-ink);
  font-family: var(--nsn-text-font);
  font-size: var(--nsn-text-size);
  line-height: var(--nsn-text-lh);
}
.ns-notice-dialog .ns-notice-dialog__text > :first-child { margin-top: 0; }
.ns-notice-dialog .ns-notice-dialog__text > :last-child { margin-bottom: 0; }
.ns-notice-dialog .ns-notice-dialog__text :is(p, ul, ol, blockquote) { margin: 0 0 1em; padding-top: 0; padding-bottom: 0; font: inherit; color: inherit; }
.ns-notice-dialog .ns-notice-dialog__text :is(ul, ol) { padding-left: 1.4em; }
.ns-notice-dialog .ns-notice-dialog__text :is(h1, h2, h3, h4) { margin: 1.3em 0 .5em; padding: 0; color: var(--nsn-title-ink); font: var(--nsn-title-font); font-size: 1.15em; text-transform: none; }
.ns-notice-dialog .ns-notice-dialog__text :is(img, video, iframe, table) { max-width: 100%; }
.ns-notice-dialog .ns-notice-dialog__text img { height: auto; }
.ns-notice-dialog .ns-notice-dialog__text strong { font-weight: 700; color: var(--nsn-strong-ink); }
.ns-notice-dialog .ns-notice-dialog__text a { color: var(--nsn-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ns-notice-dialog .ns-notice-dialog__text a:hover { color: var(--nsn-link-hover); text-decoration-thickness: 2px; }

/* the built-in letter */
.ns-notice-dialog--letter .ns-notice-dialog__text > p:first-child {
  margin-bottom: 1.1em;
  color: var(--nsn-lede-ink);
  font-size: var(--nsn-lede-size);
  font-style: var(--nsn-lede-style);
  font-weight: var(--nsn-lede-weight);
  line-height: 1.45;
}
.ns-notice-dialog--letter .ns-notice-dialog__text > p:has(> strong:first-child) {
  margin: 1.5em 0;
  padding: 16px 18px 16px 20px;
  border-left: 3px solid var(--nsn-note-rule);
  border-radius: 0 10px 10px 0;
  background: var(--nsn-note-bg);
}
.ns-notice-dialog--letter .ns-notice-dialog__text > p:nth-last-child(2):not(:first-child) {
  margin: 1.8em 0 .9em;
  font-style: var(--nsn-signoff-style);
}
.ns-notice-dialog--letter .ns-notice-dialog__text > p:last-child:not(:first-child) {
  color: var(--nsn-panel-muted);
  font: var(--nsn-role-font);
}
.ns-notice-dialog--letter .ns-notice-dialog__text > p:last-child:not(:first-child)::first-line {
  color: var(--nsn-sign-ink);
  font: var(--nsn-sign-font);
}

.ns-notice-dialog .ns-notice-dialog__foot {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 14px 44px 24px;
  background: var(--nsn-panel-bg);
}
.ns-notice-dialog .ns-notice-dialog__done {
  min-width: 140px;
  min-height: 46px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 10px;
  background: var(--nsn-btn-bg);
  color: var(--nsn-btn-ink);
  font: 700 16px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.ns-notice-dialog .ns-notice-dialog__done:hover { background: var(--nsn-btn-hover); }
.ns-notice-dialog .ns-notice-dialog__done:active { transform: translateY(1px); }

.ns-notice-dialog .ns-notice-dialog__x:focus-visible {
  outline: 2px solid var(--nsn-head-focus);
  outline-offset: -2px;
}
.ns-notice-dialog :is(.ns-notice-dialog__done, .ns-notice-dialog__text a):focus-visible {
  outline: 2px solid var(--nsn-focus);
  outline-offset: 3px;
}

/* a phone: the letter nearly fills the screen, Close spans the width */
@media (max-width: 480px) {
  .ns-notice-dialog {
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }
  .ns-notice-dialog .ns-notice-dialog__head { min-height: var(--nsn-head-h-sm); padding: 10px 56px 10px var(--nsn-head-pad-sm); }
  .ns-notice-dialog .ns-notice-dialog__mark { height: var(--nsn-mark-h-sm); }
  .ns-notice-dialog .ns-notice-dialog__x { right: 6px; }
  .ns-notice-dialog .ns-notice-dialog__body { padding: 24px 22px 10px; }
  .ns-notice-dialog .ns-notice-dialog__title { margin-bottom: 18px; font-size: var(--nsn-title-size-sm); }
  .ns-notice-dialog .ns-notice-dialog__title::after { margin-top: 14px; }
  .ns-notice-dialog .ns-notice-dialog__text { font-size: var(--nsn-text-size-sm); }
  .ns-notice-dialog--letter .ns-notice-dialog__text > p:first-child { font-size: var(--nsn-lede-size-sm); }
  .ns-notice-dialog--letter .ns-notice-dialog__text > p:has(> strong:first-child) { padding: 14px 16px 14px 18px; }
  .ns-notice-dialog .ns-notice-dialog__foot { padding: 12px 22px 18px; }
  .ns-notice-dialog .ns-notice-dialog__done { width: 100%; }
}

/* motion only for people who have not asked for less of it */
@media (prefers-reduced-motion: no-preference) {
  .ns-notice-dialog[open] { animation: nsn-rise 280ms cubic-bezier(.16, 1, .3, 1); }
  .ns-notice-dialog[open]::backdrop { animation: nsn-fade 220ms linear; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-notice-dialog,
  .ns-notice-dialog::backdrop { animation: none !important; transition: none !important; }
  .ns-notice-dialog .ns-notice-dialog__done:active { transform: none; }
}
@keyframes nsn-rise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes nsn-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media print {
  .ns-notice,
  .ns-notice-dialog { display: none !important; }
}