/* ============================================================
   nav.css — the two header controls, site-owned.

   Loaded from every page in the book.css and lecture.css shells,
   AFTER those stylesheets, so it wins on order without either of
   the vendored files being edited.

   Scope is the header and nothing else: the logo (.mark) and the
   back link (.backlink). No selector here reaches the article
   body, and nothing here is ever display:none at any width — the
   back link surviving on a phone is the whole point of it.

   Colour comes from the shell tokens only, because book.css
   redefines --text/--muted/--accent in all four themes (light,
   dark, black, bw). Every token carries a literal fallback so a
   missing token can never render the control invisible.
   ============================================================ */

/* ---- the back link ----------------------------------------
   Both shells lay the nav out as `display:flex` with
   `justify-content:space-between` and two children. A third
   child would be stranded in the middle of the bar, so the back
   link claims the free space itself: margin-inline-end:auto
   pins it beside the logo and pushes .navlinks to the far end.

   It sits OUTSIDE .navlinks in the markup, which is why neither
   `@media(max-width:900px){.navlinks a:not(.cta){display:none}}`
   (book.css) nor `@media(max-width:820px){.navlinks{display:none}}`
   (lecture.css) can reach it. That is structural: no override,
   no !important, no exemption.
   ------------------------------------------------------------ */
.backlink{
  margin-inline-end:auto;
  margin-inline-start:.55em;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  flex:0 1 auto;
  min-width:0;
  padding:.34em .6em;
  border-radius:100px;
  font-size:.88rem;
  line-height:1.25;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  color:var(--muted,#95959e);
  /* Deliberately NOT transitioning `color`. Chrome latches a
     transitioned colour that is read from a custom property: when
     book.js switches the theme the old colour is kept until the
     page reloads. book.css's own `.navlinks a` has that bug today;
     this control should not inherit it, so only the background
     animates and the colour re-resolves with the theme. */
  transition:background .25s;
}

/* the label shrinks and ellipsises; the arrow never does */
.backlink .bl-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* the arrow is its own element so a text selection across the
   control yields the section name and not "← Casebook" */
.backlink .bl-arrow{
  flex:none;
  font-size:1.05em;
  line-height:1;
  color:var(--accent,#e9b45c);
  -webkit-user-select:none;
  user-select:none;
  transition:transform .25s var(--ease,ease);
}

.backlink:hover,
.backlink:focus-visible{
  color:var(--text,#eaeefb);
  background:var(--surface,rgba(255,255,255,.05));
}
.backlink:hover .bl-arrow,
.backlink:focus-visible .bl-arrow{transform:translateX(-2px)}

.backlink:focus-visible{
  outline:2px solid var(--accent,#e9b45c);
  outline-offset:2px;
}

/* ---- the logo ---------------------------------------------
   The label is the same on all 53 pages now, so it may give way
   a little rather than push the back link off the bar. Both
   shells already set .mark's font, colour and svg size; only the
   flex behaviour is added here.
   ------------------------------------------------------------ */
.mark{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---- phones -----------------------------------------------
   At 375px the bar has to carry the logo, the back link and
   whichever control the shell keeps (the Contents button, or the
   menu button on a lecture). "Teaching Resources" at its desktop
   size leaves too little for the section name, so the WORDMARK
   is set smaller here rather than letting either label clip —
   a clipped logo reads as broken, and the section name is the
   half that actually carries information.

   One label still cannot fit: "Evidence-Based Clinical
   Examination" is 35 characters and ellipsises by design. Its
   full text stays in the aria-label, and the arrow never shrinks,
   so the control is always recognisable and always tappable.
   Nothing here is ever hidden.
   ------------------------------------------------------------ */
@media(max-width:640px){
  /* the logo is the same width on every page, so it is pinned: a
     clipped wordmark reads as broken, and pinning it makes the
     back link the only thing that can give, which is correct —
     it is the one whose length varies by page. */
  .mark{font-size:.88rem;flex:0 0 auto}
  .backlink{
    font-size:.8rem;
    padding:.42em .5em;
    margin-inline-start:.25em;
    gap:.26em;
    min-width:5em;          /* never squeezed below arrow + a word */
  }
  .backlink .bl-arrow{font-size:1em}
}

@media(prefers-reduced-motion:reduce){
  .backlink,
  .backlink .bl-arrow{transition:none}
  .backlink:hover .bl-arrow,
  .backlink:focus-visible .bl-arrow{transform:none}
}