/* ==========================================================================
   SayTheWord — shared site chrome
   The few components every marketing, legal and blog page renders, defined
   once: the skip link, the brand mark and the quick-exit pill that
   assets/site-chrome.js injects. site.css and blog.css each used to carry
   their own copy of .quick-exit; this sheet is loaded by the generated head
   block on every page so there is exactly one. The app owns its own exit
   button and does not load this file.
   ========================================================================== */

:root {
  /* Section-title size shared by the landing H2s, the legal H1s and the
     article H1: fluid between two tokens, never a literal. */
  --t-title-lg: clamp(var(--t-title), 2.8vw, var(--t-display));
}

/* Skip link: hidden until keyboard focus. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-md);
  background: var(--bg-elev);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0 1.25rem;
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: top var(--dur-fast) ease;
}

.skip-link:focus { top: 0.75rem; }

.brand-mark { display: block; flex-shrink: 0; }

/* Quick exit — a labelled pill (GOV.UK "Exit this page" pattern), bottom
   right on every page, full opacity. Escape twice or Shift three times; the
   dots inside the pill count the Shift presses. */
.quick-exit {
  position: fixed;
  right: max(0.75rem, var(--safe-right));
  bottom: max(0.75rem, var(--safe-bottom));
  z-index: 1500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--icon-btn);
  padding: 0 0.875rem 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background var(--dur) ease, transform var(--dur-fast) ease;
}

.quick-exit svg { width: 18px; height: 18px; flex-shrink: 0; }
.quick-exit:hover { background: var(--accent-soft); }
.quick-exit:active { transform: scale(0.96); }

.quick-exit-dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 0.125rem;
}

.quick-exit-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.quick-exit-dot.is-on {
  background: var(--accent-fill);
  border-color: var(--accent);
}

@media print { .quick-exit, .skip-link { display: none; } }