/* annotations.css — Forcepush teaching labels added on top of the vendored
 * HTML5 UP "Spectral" template (see ATTRIBUTION.md). Not part of the
 * original template; loaded after main.css so it always wins on specificity
 * without needing !important. Static (no JS, no toggle) — every label is
 * always visible, the opposite of the old interactive legend overlay this
 * page replaces (2026-10-01 v3 split brief item 5).
 *
 * 2026-10-01 v4 S4 (#8a/#3): markers made clearly visible without the
 * removed key/grid to explain them — bigger badge, Forcepush's own Tomorrow
 * facet font + brand accent instead of a generic navy pill, and a dashed
 * outline directly on the tagged element so the labelled region itself
 * reads at a glance, not just the badge. This page is a standalone HTML
 * document (iframe, not wrapped in the shell) so there's no shared
 * :root — colors are the shell's own --accent/--accent-deep hex values,
 * hard-coded here on purpose (no CSS custom properties to inherit from). */

.fp-tag-host {
  position: relative;
  outline: 2px dashed rgba(19, 79, 166, .55);
  outline-offset: 2px;
}

.fp-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 40;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 7px;
  background: #134FA6;
  color: #fff;
  font-family: "Tomorrow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.3; /* host elements (e.g. #header: line-height:3em) would
                        otherwise cascade in and blow up the badge's height */
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(10, 30, 60, .35);
  white-space: nowrap;
}
.fp-tag__pl { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: inherit; }
.fp-tag__en { font-size: 11px; font-weight: 400; letter-spacing: .04em; color: rgba(255, 255, 255, .78); line-height: inherit; }

/* a few hosts (small cards) need a tighter badge */
.fp-tag-host--sm .fp-tag { top: 6px; left: 6px; padding: 4px 9px; }
.fp-tag-host--sm .fp-tag__pl { font-size: 11px; }
.fp-tag-host--sm .fp-tag__en { font-size: 9.5px; }

/* keep labels from covering nav links on narrow phones */
@media (max-width: 480px) {
  .fp-tag { top: 6px; left: 6px; padding: 5px 10px; }
  .fp-tag__pl { font-size: 11px; }
  .fp-tag__en { font-size: 9.5px; }
}

/* #header is `position: fixed; top: 0` with zero flow-height (Spectral's
 * "alt" header overlays the banner) — #banner's own box therefore starts at
 * the very top of the document too, right under the fixed header, so a
 * default top:10/left:10 badge on #banner would sit exactly on top of the
 * header's own badge. Push #banner's tag below the fixed header's height. */
#banner.fp-tag-host > .fp-tag { top: 64px; }
@media (max-width: 480px) {
  #banner.fp-tag-host > .fp-tag { top: 56px; }
}