/* bar.css: the announcement bar, shared by the app (index.html) and /about.
   Moved unchanged from about.css. Loads after ds/tokens.css; needs <html class="pc">. */

/* Announcement bar (every page: the app and /about).
   A dark band in the site's language: ink ground (data-theme="dark"), the brand gradient as a 1px rule
   under it (the same rule .pc-cta draws on top), an orange pill tag, one message at a time with an arrow
   that moves on hover (as .pc-btn:hover .pc-arr does), pause and close on the right.
   Tokens only (design-system/tokens.css). Needs <html class="pc">. No new colours, fonts or radii.
   Ids #announcement-bar and #close-announcement are kept from the live app. */

.pa-bar {
  position: relative;
  z-index: var(--z-sticky); /* under the app header layer, so the mobile drawer still covers it */
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-sans);
}
/* The brand gradient as a hairline, like the top rule of .pc-cta */
.pa-bar::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--gradient-brand);
  opacity: 0.9;
  pointer-events: none;
}
/* Closed: hidden before first paint by the inline head snippet (html.pa-bar-closed), then by [hidden] */
html.pa-bar-closed .pa-bar { display: none; }

.pa-bar__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.pa-bar__main {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* Orange pill tag */
.pa-bar__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* Messages: stacked in one grid cell, so the longest reserves the width and nothing jumps
   (the same trick as the homepage hero's typed eyebrow, .qh__stage). */
.pa-bar__msgs {
  display: grid;
  min-width: 0;
  overflow: hidden;
}
.pa-bar__msg {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.pa-bar__txt {
  overflow: hidden;
  padding-block: 4px 6px; /* room for the hover underline inside the clip box */
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pa-bar__arr {
  flex: none;
  color: var(--text-accent);
  transition: transform var(--duration-base) var(--ease-out);
}
.pa-bar__msg:hover .pa-bar__txt,
.pa-bar__msg:focus-visible .pa-bar__txt {
  text-decoration-color: var(--accent);
}
.pa-bar__msg:hover .pa-bar__arr,
.pa-bar__msg:focus-visible .pa-bar__arr {
  transform: translateX(4px);
}
.pa-bar__msg:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}

/* Rotation: only the active message is visible and reachable. Script adds .is-rotating. */
.pa-bar.is-rotating .pa-bar__msg {
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}
.pa-bar.is-rotating .pa-bar__msg:not(.is-on) {
  opacity: 0;
  transform: translateY(70%);
  pointer-events: none;
}
.pa-bar.is-rotating .pa-bar__msg.is-out {
  transform: translateY(-70%);
}
/* Without the script only the first message shows */
.pa-bar:not(.is-rotating) .pa-bar__msg + .pa-bar__msg { display: none; }

/* Pause and close: 32px round targets in the right column */
.pa-bar__ctl {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}
.pa-bar__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.pa-bar__btn:hover { color: var(--text); background: var(--surface-hover); }
.pa-bar__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.pa-bar__btn svg { width: 14px; height: 14px; }
.pa-bar__btn .pa-ico-play { display: none; }
.pa-bar__btn[aria-pressed='true'] .pa-ico-play { display: block; }
.pa-bar__btn[aria-pressed='true'] .pa-ico-pause { display: none; }

/* Brand selection colour inside the bar */
.pa-bar ::selection { background: var(--accent); color: var(--on-accent); }

/* Phones: one line. The tag drops (the message carries the brand), the group sits left. */
@media (max-width: 599px) {
  .pa-bar__in {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding-inline: var(--space-4) var(--space-2);
  }
  .pa-bar__main { grid-column: 1; }
  .pa-bar__ctl { grid-column: 2; }
  .pa-bar__tag { display: none; }
  .pa-bar__msg { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-bar__arr,
  .pa-bar__txt,
  .pa-bar.is-rotating .pa-bar__msg { transition: none; }
}