/* ============================================================================
   The product chrome: one header for every surface a customer already owns.

   NOT the marketing nav, and not a replacement for it. The estate has exactly one canonical
   chrome and it is built to sell: SAVI Report, Industries, Methodology, Guides, Sign in, Book a
   call, Free audit. Every product surface therefore opted OUT of it - results/, fix-list/,
   citation-map/setup, citation-map/workspace and ai-visibility-playbook/ are all listed in
   shared/inject-shared.py's skip sets, each for a reason that is individually correct. The
   workspace's own note is the clearest: wearing the site header put "52 of its 68 visible
   controls" outside the report, with "Get my free scores" as the loudest thing on a page
   somebody had paid £295 for.

   What nobody then built was the OTHER chrome. So eleven pages each invented one, and they
   drifted exactly as far apart as that implies: five different header elements (.nav, .cmw-top,
   .app-header, .top-bar, .header), three pages carrying no header at all, and the same logo at
   32px, 28px, 27px, unsized and absent. This file is that missing second chrome.

   EVERY VALUE IS LITERAL, and that is copied deliberately from ss-product-nav.css rather than
   being an oversight. This renders on two hosts (searchscore.io and api.searchscore.io) inside
   at least four different stylesheets, two of which define --ink and --line differently and one
   of which defines neither. A shared component that inherits a variable one page declares and
   another does not is a component that is invisible on exactly one surface, which is the failure
   this whole exercise exists to stop repeating.

   The switcher (ss-product-nav.css) mounts INTO this header and keeps its own styles. The two
   are separate files because the switcher already ships on three pages and must keep working on
   them unchanged while this rolls out.
   ============================================================================ */

.sspc {
  border-bottom: 1px solid #E3E7EE;
  background: #FFFFFF;
  font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #16202E;
}

/* THE HEADER ALIGNS TO ITS HOST'S CONTENT, and the two custom properties are the whole mechanism.
   Every product page has its own reading width - the account shell is 880px, the funnel pages run
   to 1000px, the workspace wider again - so a header with one fixed width lines up with exactly
   one of them and floats free of the rest.

   Caught by photographing it rather than by reading it: at 1440 the mark sat at x=144 while the
   card beneath it started at x=300, so the first two things on the page disagreed about where the
   page begins. product-tokens.css records the same defect on Results, where one column was drawn
   at 700/760/880/900/1100/1240 and "nothing shared a left edge - the fragmented feel". A shared
   chrome that reintroduces it on ten pages at once would be worse than the five bespoke headers
   it replaces, because at least those were drawn to fit their own page.

   A host sets --sspc-width and --sspc-pad to its own content box and the header lines up. The
   defaults are for a page that has no opinion. --sspc-pad deliberately applies at both widths:
   a page that asks for alignment wants it on a phone too. */
.sspc-in {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--sspc-width, 1200px);
  margin: 0 auto;
  padding: 12px var(--sspc-pad, 24px);
  min-height: 56px;
  box-sizing: border-box;
}

/* STICKY IS A MODIFIER, NOT THE DEFAULT, because the surfaces disagree for good reasons and a
   shared component must not decide for them. The Playbook workspace pins its header at z-index 30
   above a tab bar at 20, and the invite page pins its own at 10; a long fix list or a centred card
   wants the height back. Opting in keeps the behaviour each page already had rather than changing
   it silently in a chrome migration - which is exactly the kind of change nobody attributes to the
   right commit three weeks later.

   The z-index is a variable because the one number that matters is how it sits against the HOST's
   own layers, which this file cannot know. */
.sspc--sticky {
  position: sticky;
  top: 0;
  z-index: var(--sspc-z, 10);
}

/* ONE LOGO SIZE, and 150x27 is the one the paid deliverable already used. The alternative was
   fix-list's 176x32, which would have enlarged the mark on the Playbook workspace and the
   Tracker - the two surfaces where restraint matters most and where a customer is reading, not
   being sold to. Width and height are on the <img> as well as here: the unsized copies on
   /results and the upgrade page reserve no space, so the header reflows as the SVG lands. */
.sspc-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.sspc-logo img {
  display: block;
  width: 150px;
  height: 27px;
}

.sspc-logo:focus-visible {
  outline: 3px solid #9CC0FF;
  outline-offset: 3px;
  border-radius: 4px;
}

/* The switcher's slot. It mounts a <nav class="ssnav ssnav-dd"> in here, and ss-product-nav.css
   already carries a host adapter for each of the old headers; this gives it one host to adapt to
   instead of three. Kept as its own box rather than letting the nav be a flex child directly, so
   the mount point exists in the DOM before the script runs and the header does not jump. */
.sspc-nav {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 32px;
}

/* Where each page says what the customer is looking at: their domain, the tier, where they are
   in a flow. It is deliberately a SLOT and not content - the frame is shared, the context is
   the page's own, and flattening the two is how a shared header ends up saying nothing useful
   on nine surfaces. Pushed right, collapses first. */
.sspc-context {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
  color: #5C6B80;
  font-size: 13px;
  text-align: right;
}

.sspc-context b,
.sspc-context strong {
  color: #16202E;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A link in the context slot is a control, so it takes the accessible blue rather than the muted
   ink: #286CD8 is 4.97:1 on white, where the estate's older --blue #2F80FF measures 3.72:1 and
   fails AA for text. */
.sspc-context a {
  color: #286CD8;
  text-decoration: none;
  font-weight: 600;
}

.sspc-context a:hover { text-decoration: underline; }

.sspc-context a:focus-visible {
  outline: 3px solid #9CC0FF;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Narrow ───────────────────────────────────────────────────────────────────
   The context slot wraps to its own line rather than squeezing the logo or the switcher, because
   those two are how a person leaves; the domain is only how they confirm where they are. Below
   560 the whole header is two rows, which is the same shape the switcher's own breakpoint uses,
   so the two do not disagree about when narrow begins. */
@media (max-width: 560px) {
  .sspc-in {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px var(--sspc-pad, 16px);
  }

  .sspc-logo img { width: 132px; height: 24px; }

  .sspc-context {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    text-align: left;
  }
}

/* The app pages run on a dark-ink palette in places and set their own body background; the
   header is always the paper plate so the mark sits on the ground it was drawn for. */
@media print {
  .sspc { display: none; }
}