/* announcement-bar — the one-line announcement strip, a standalone component
 * in the overlay group (category "overlay": never a plan-rung band — placing
 * one is a deliberate site decision). Unlike its overlay siblings it is NOT a
 * fixed layer: the strip stands IN FLOW, and its include belongs at the very
 * top of the body, BEFORE the chrome header. Scripts-off it simply stands
 * (the structural floor) — only the dismiss X is engine-built
 * (announcement-bar.js).
 *
 * The line speaks the DETAIL register (the tracked, cased label voice —
 * setting only the detail SIZE would lose the register's tracking and caps
 * and read as small body copy), hairlined off the bar below.
 *
 * The strip takes the kit-wide TONE axis (`tone` → data-tone on this
 * element): a promise bar is a LOUD device on plenty of looks — the
 * black-band "free shipping over $150" strip is the retail idiom. `default`
 * keeps the page background, `surface` the quiet tint, `inverted` the ink
 * band, and `accent` the brand colour. The tone stamps repaint
 * --sk-bg/--sk-ink themselves (base.css), so the strip only has to NOT
 * hardcode its own colours: ink follows the band it lands on.
 *
 * CHROME INTERPLAY lives on the header's side: a floating header
 * (data-overlap="hero") rests below a preceding strip via its static
 * position, and site-header.js folds the strip into its measured chrome
 * geometry (clearance/push) — see site-header.css "The OVERLAP axis". */
.sk-announcement-bar {
  /* The anchor for the engine-built dismiss X (below). */
  position: relative;
  margin: 0;
  /* Vertical air follows the chrome BAR's own dial (at half strength — the
   * strip is a thinner band than the bar), so a theme that opens the chrome
   * opens the strip with it instead of pinning it to a space-scale
   * constant. */
  padding: calc(var(--sk-bar-pad-y) * 0.5) var(--sk-bar-pad-x);
  text-align: center;
  font-size: var(--sk-text-detail-size);
  font-weight: var(--kit-weight-detail);
  letter-spacing: calc(var(--kit-track-detail) * 1em);
  text-transform: var(--kit-caps-eyebrow);
  color: var(--sk-ink-muted);
  background-color: var(--sk-bg);
  border-bottom: var(--sk-border-width) solid var(--sk-stroke);
}
/* On a tinted or painted strip the ink is the band's own, not the muted
 * page ink (muted on an inverted band reads as a smudge). */
.sk-announcement-bar[data-tone="surface"] {
  background-color: var(--sk-surface);
}
.sk-announcement-bar:is([data-tone="inverted"], [data-tone="accent"]) {
  color: var(--sk-ink);
  border-bottom-color: transparent;
}

/* The optional LINK (href) — the strip's one line IS the anchor. It keeps
 * the band's own ink (muted on quiet tones, full on inverted/accent) and
 * signals itself with the underline; hover raises to full ink. */
.sk-announcement-bar-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sk-announcement-bar-link:hover {
  color: var(--sk-ink);
}

/* The DISMISS affordance (data-dismiss="dismissable") — the X is ENGINE-BUILT
 * (announcement-bar.js, the date-picker doctrine), so it exists only
 * scripts-on; scripts-off the strip simply stands. The thin band can't carry
 * a square 44px target, so the button spans the strip's FULL height at its
 * right edge with the chrome bar's own gutter as its padding — the padded
 * column is the target. The strip reserves SYMMETRIC inline room for it (the
 * :has gate, so a fixed strip pays nothing), keeping the centered line truly
 * centered. The hide rides the site's ONE announcement cookie, 30 days,
 * keyed to the text's md5 — see announcement-bar.js. */
.sk-announcement-bar:has(.sk-announcement-bar-close) {
  padding-inline: calc(var(--sk-bar-pad-x) * 2 + var(--sk-icon-size));
}
.sk-announcement-bar-close {
  position: absolute;
  inset: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sk-bar-pad-x);
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.sk-announcement-bar-close .sk-icon-glyph {
  width: calc(var(--sk-icon-size) * 0.7);
  height: calc(var(--sk-icon-size) * 0.7);
}