/* ==========================================================================
   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.
   ========================================================================== */

/* 9 Star Media: amber over the charcoal header (tokens from stylesheet_zz_9star_m_shell.css:
   --m-brand, --m-brand-ink, --m-brand-text, --m-brand-hover; and stylesheet_zz_shop.css).
   The letter: charcoal letterhead band with the white/amber 9star mark and an amber rule, then
   the site's own sans on white paper. No webfonts.
   Contrast (WCAG AA needs 4.5:1 for text): each pair is noted on its line. */
:root {
  --nsn-bar-bg: #e8a900;          /* amber */
  --nsn-bar-ink: #2d2d2d;         /* charcoal on amber: 6.6:1 */
  --nsn-bar-hover: rgb(45 45 45 / .12);   /* ink on the hovered x: 5.5:1 */
  --nsn-chip-bg: #2d2d2d;         /* the "Read" pill: 6.6:1 against the bar */
  --nsn-chip-ink: #ffffff;        /* white on charcoal: 13.8:1 */
  --nsn-focus-bar: #2d2d2d;       /* focus ring on the bar: 6.6:1 */

  --nsn-panel-bg: #ffffff;
  --nsn-panel-clear: rgb(255 255 255 / 0);
  --nsn-panel-ink: #2d2d2d;       /* 13.8:1 on white */
  --nsn-panel-muted: #5f6264;     /* signature role line: 6.1:1 */
  --nsn-edge: rgb(45 45 45 / .16);        /* scroll shadow at the text's edges */
  --nsn-shadow: rgb(0 0 0 / .6);
  --nsn-shadow-near: rgb(0 0 0 / .18);
  --nsn-backdrop: rgb(20 20 20 / .66);

  --nsn-head-bg: #2d2d2d;         /* letterhead band: the site header's charcoal */
  --nsn-head-ink: #ffffff;        /* the x: 13.8:1 */
  --nsn-head-ink-hover: #ffffff;
  --nsn-head-hover: rgb(255 255 255 / .12);   /* white on it: 9.4:1 */
  --nsn-head-rule: #e8a900;       /* amber rule under the band (decorative) */
  --nsn-head-focus: #e8a900;      /* focus ring on the band: 6.6:1 */
  --nsn-head-align: flex-start;
  --nsn-head-pad: 44px;           /* the mark lines up with the text */
  --nsn-head-pad-sm: 22px;
  --nsn-head-h: 64px;
  --nsn-head-h-sm: 56px;
  --nsn-mark-h: 30px;
  --nsn-mark-h-sm: 26px;

  --nsn-title-font: 800 28px/1.18 "Helvetica Neue", Arial, Helvetica, sans-serif;
  --nsn-title-size-sm: 24px;
  --nsn-title-track: -.015em;
  --nsn-title-ink: #1f1f1f;       /* 16.5:1 */
  --nsn-title-align: left;
  --nsn-title-dash: none;

  --nsn-text-font: "Helvetica Neue", Arial, Helvetica, sans-serif;
  --nsn-text-size: 17px;
  --nsn-text-size-sm: 16.5px;
  --nsn-text-lh: 1.65;
  --nsn-lede-ink: #1f1f1f;
  --nsn-lede-size: 20px;
  --nsn-lede-size-sm: 18.5px;
  --nsn-lede-style: normal;
  --nsn-lede-weight: 500;          /* Helvetica Neue Medium; Arial has none and shows regular */
  --nsn-strong-ink: #1f1f1f;
  --nsn-note-bg: #fff5d6;         /* amber tint: text 12.7:1, link 4.9:1 */
  --nsn-note-rule: #e8a900;
  --nsn-signoff-style: normal;
  --nsn-sign-font: 800 26px/1.3 "Helvetica Neue", Arial, Helvetica, sans-serif;
  --nsn-sign-ink: #1f1f1f;
  --nsn-role-font: 400 14px/1.5 Arial, Helvetica, sans-serif;

  --nsn-link: #8a6400;            /* the brand as text on white: 5.4:1 */
  --nsn-link-hover: #2d2d2d;
  --nsn-btn-bg: #e8a900;          /* Close button */
  --nsn-btn-ink: #2d2d2d;         /* 6.6:1 */
  --nsn-btn-hover: #d39a00;       /* ink on it: 5.5:1 */
  --nsn-focus: #8a6400;           /* focus ring on the paper: 5.4: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; }
}