/**
 * Sprint 4 · item 4 — chrome for the prerendered specimen sheets.
 *
 * The sheets are static snapshots and cannot import the app's Tailwind build,
 * so the tokens are restated here ONCE, with the same values as src/styles.css,
 * and every piece of chrome we own reads them. That is what replaces the
 * per-element inline styles the snapshots used to carry.
 *
 * Contrast, measured against the bar's navy: cream link text 15.9:1, the muted
 * reference label 7.2:1, the accent print button (navy label on accent fill)
 * 6.0:1 — all clear of WCAG AA.
 */
:root {
  --doc-navy: rgb(0, 16, 64);
  --doc-cream: #fcfaf6;
  --doc-accent: #7fa8e0;
  --doc-muted: #b9cae4;
  --doc-rule: rgba(255, 255, 255, 0.16);
}

.doc-chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--doc-navy);
  color: var(--doc-cream);
  border-bottom: 1px solid var(--doc-rule);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.doc-chrome__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.doc-chrome__group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.doc-chrome__link {
  color: var(--doc-cream);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* 44px tap target without changing the bar's height perception */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.doc-chrome__lang {
  color: var(--doc-accent);
}

.doc-chrome__ref {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--doc-muted);
}

.doc-chrome__print {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--doc-accent);
  color: var(--doc-navy);
  border: 0;
  border-radius: 3px;
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
}

.doc-chrome :focus-visible,
.doc-main :focus-visible {
  outline: 2px solid var(--doc-accent);
  outline-offset: 2px;
}

@media print {
  .doc-chrome {
    display: none !important;
  }
}