/* Shared header and footer for developers.cogni.build.
   Every page defines its own palette in the same variable names, so this
   inherits each page's ground/ink/line and follows their dark modes without
   knowing anything about them. Fallbacks cover index.html, which uses the
   older names in developers.css. */

.dev-chrome-top,
.dev-chrome-foot {
  font-family: var(--f-sans, var(--sans, "Avenir Next", "Helvetica Neue", Arial, sans-serif));
  box-sizing: border-box;
}
.dev-chrome-top *,
.dev-chrome-foot * { box-sizing: border-box; }

/* ── header ─────────────────────────────────────────────────────────── */
/* The labs use four different .page max-widths, so a bordered card can never
   align with all of them. The chrome is a full-bleed band instead — no side
   edges to line up — with an inner container that tracks the content. */
.dev-chrome-in {
  /* The labs' own sticky bar is full-bleed with 18px padding and sits directly
     under this header, so that is the edge it has to line up with. Centring on
     a max-width left them 267px apart on a wide screen. */
  max-width: none;
  margin: 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.dev-chrome-top {
  margin: 0 0 18px;
  padding: 13px 0;
  background: var(--surface, var(--paper, #fffdf6));
  border: 0;
  border-bottom: 1px solid var(--line, #d7cfbe);
}
.dev-chrome-top a { text-decoration: none; }
.dev-chrome-brand {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--core, var(--gold, #8a6725));
}
.dev-chrome-brand img { width: 26px; height: 26px; display: block; }
.dev-chrome-brand span {
  font: 400 17px/1 var(--f-display, var(--sans, "Avenir Next", Arial, sans-serif));
  letter-spacing: -.035em;
}
.dev-chrome-brand b { font-weight: 650; }
.dev-chrome-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  flex-wrap: wrap;
  /* A flex item defaults to min-width:auto and will not shrink below its
     content, so the nav pushed the header wider than the page instead of
     wrapping. */
  min-width: 0;
  justify-content: flex-end;
}
.dev-chrome-brand { flex-shrink: 0; }
.dev-chrome-nav a {
  color: var(--muted, #706a5c);
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.dev-chrome-nav a:hover {
  color: var(--ink, #090907);
  border-bottom-color: var(--core-line, var(--gold, #d3a94f));
}
.dev-chrome-nav a[aria-current="page"] {
  color: var(--ink, #090907);
  border-bottom-color: var(--core-line, var(--gold, #d3a94f));
}

/* ── footer ─────────────────────────────────────────────────────────── */
.dev-chrome-foot {
  margin: 40px 0 0;
  padding: clamp(20px, 3vw, 30px) 0;
  background: var(--surface, var(--paper, #fffdf6));
  border: 0;
  border-top: 1px solid var(--line, #d7cfbe);
}
.dev-chrome-foot .dev-chrome-in { display: block; }
.dev-chrome-foot h2 {
  margin: 0;
  color: var(--muted, #706a5c);
  font: 650 10px/1 var(--f-mono, var(--mono, ui-monospace, monospace));
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dev-chrome-next {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.dev-chrome-next a {
  padding: 14px 15px;
  display: block;
  text-decoration: none;
  background: var(--ground, var(--paper2, #f3f0e8));
  border: 1px solid var(--line, #d7cfbe);
  transition: border-color .15s ease, transform .15s ease;
}
.dev-chrome-next a:hover {
  border-color: var(--core-line, var(--gold, #d3a94f));
  transform: translateY(-1px);
}
.dev-chrome-next span {
  display: block;
  color: var(--core, var(--gold, #8a6725));
  font: 650 9px/1 var(--f-mono, var(--mono, ui-monospace, monospace));
  letter-spacing: .11em;
  text-transform: uppercase;
}
.dev-chrome-next b {
  margin-top: 9px;
  display: block;
  color: var(--ink, #090907);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}
.dev-chrome-next small {
  margin-top: 6px;
  display: block;
  color: var(--muted, #706a5c);
  font-size: 11.5px;
  line-height: 1.5;
}
/* The next step in the guided path reads louder than the side routes. */
.dev-chrome-next a.is-next {
  background: var(--core-bg, #f4e9c8);
  border-color: var(--core-line, #d3a94f);
}

.dev-chrome-contact {
  margin: 22px 0 0;
  padding-top: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line, #d7cfbe);
}
.dev-chrome-contact p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted, #706a5c);
  font-size: 12.5px;
  line-height: 1.6;
}
.dev-chrome-contact a {
  color: var(--core, var(--gold, #8a6725));
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.dev-chrome-legal {
  margin: 16px 0 0;
  color: var(--muted, #706a5c);
  font: 10px/1.5 var(--f-mono, var(--mono, ui-monospace, monospace));
  opacity: .75;
}

@media (max-width: 640px) {
  .dev-chrome-top { gap: 11px; }
  .dev-chrome-nav { gap: 14px; }
  .dev-chrome-nav a { font-size: 12px; }
}

/* ── "What that showed" — the closing third of each lab ──────────────── */
.dev-chrome-take .dev-chrome-in { display: block; }
.dev-chrome-take {
  margin: 34px 0 0;
  padding: clamp(20px, 3vw, 28px) 0;
  background: var(--core-bg, #f4e9c8);
  border: 0;
  border-top: 1px solid var(--core-line, #d3a94f);
  border-bottom: 1px solid var(--core-line, #d3a94f);
  font-family: var(--f-sans, var(--sans, "Avenir Next", Helvetica, Arial, sans-serif));
}
.dev-chrome-take h2 {
  margin: 0;
  color: var(--core, #8a6725);
  font: 650 10px/1 var(--f-mono, var(--mono, ui-monospace, monospace));
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dev-chrome-take p {
  margin: 13px 0 0;
  max-width: 84ch;
  color: var(--ink2, var(--ink, #28251d));
  font-size: 15px;
  line-height: 1.65;
}
.dev-chrome-take b { font-weight: 700; }

/* ── the one control worth pushing first ────────────────────────────── */
.dev-cue {
  position: relative;
  animation: devCue 2.2s ease-in-out infinite;
}
@keyframes devCue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211, 169, 79, .62); }
  60%      { box-shadow: 0 0 0 9px rgba(211, 169, 79, 0); }
}
.dev-cue[data-cue]::after {
  content: attr(data-cue);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  color: var(--core, #8a6725);
  font: 700 10px/1 var(--f-sans, var(--sans, sans-serif));
  letter-spacing: .04em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .dev-cue { animation: none; box-shadow: 0 0 0 2px var(--core-line, #d3a94f); }
}

/* Chrome follows the same split as cogni.build: Avenir Next for the few
   display-weight items, Helvetica Neue for everything read at length. */
.dev-chrome-next b,
.dev-chrome-take p { font-family: var(--f-display, var(--sans, "Avenir Next", Arial, sans-serif)); }
.dev-chrome-take p { font-weight: 400; }

/* In a wrapped sticky bar there is no headroom above a control, so the cue
   label lands on the page title. Keep the ring, drop the words. */
/* A cue on a control inside the sticky bar has no headroom — its label lands
   above the bar and reads as a stray heading. Drop it there; the ring is
   enough. */
.top .dev-cue[data-cue]::after { display: none; }

/* Nav items must not break mid-word, and must not be squeezed narrower than
   their text — otherwise nowrap content spills out of a 30px box and drags the
   page wider. They keep their size; the nav wraps around them. */
.dev-chrome-nav a { white-space: nowrap; flex-shrink: 0; }

/* The chrome is injected into pages that style bare elements — the compendium
   has `nav a { display: grid }`, which turned every nav link into a 30px grid
   item with its text spilling out and dragging the page wider. State the
   display mode explicitly rather than inheriting whatever the host page does. */
.dev-chrome-top a:not(.dev-chrome-brand),
.dev-chrome-nav a,
.dev-chrome-foot a:not(.dev-chrome-brand) { display: inline-block; }
/* Higher specificity than the rule above, which is itself an `a` selector
   inside .dev-chrome-top and was overriding the brand's own display mode. */
.dev-chrome-top a.dev-chrome-brand,
.dev-chrome-foot a.dev-chrome-brand {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  /* The wordmark is brand gold on every page. --core is the page's accent and
     is green on the compendium, which would recolour the mark. */
  color: #8a6725;
}
.dev-chrome-brand span { white-space: nowrap; }
:root[data-theme="dark"] .dev-chrome-brand,
.dev-chrome-brand { color: #8a6725; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dev-chrome-top a.dev-chrome-brand { color: #d3a94f; }
}
:root[data-theme="dark"] .dev-chrome-top a.dev-chrome-brand { color: #d3a94f; }
.dev-chrome-next a { display: block; }
.dev-chrome-top { row-gap: 10px; }