/* ============================================================================
   butler-help.css — THE HELP BUTTON. One control, one look, every page.
   ----------------------------------------------------------------------------
   James's order (2026-08-12): "On every single page on the website there should
   be a Help button, at the top preferred. When they press it, they go to the
   help menu with the page they came from's help topics suggested right there
   on top."

   This is the LOOK half. The behaviour half is /app/butler-help.js, which
   mounts one <a class="bc-helpbtn"> into each page's top header and points it at
   /howto/?from=<the page you were on>.

   DESIGN STANDARD COMPLIANCE (Butler Design Standard, approved Aug 11 2026):
     * icon + WORD, never a bare "?" — the audit called a bare-?-swarm an
       anti-pattern, so there is exactly ONE labelled Help control per page.
     * 44px tap target (THE TAP LAW).
     * thin-line icon, family A, 1.8 stroke — the one sanctioned family.
     * NO colour of its own. It borrows currentColor from whatever header it
       lands in, so it reads correctly on the hub's white bar, Schedule's dark
       bar and Comms' navy alike, and it never spends a meaning-colour on
       decoration.

   Loaded as a real stylesheet on purpose: several Butler apps send
   "style-src 'self'" and silently throw inline styles away.

   WHY "bc-helpbtn" AND NOT "bc-help": butler-tokens.css already owns .bc-help
   - the 16px ghost-grey inline help icon that hides until you touch its row
   (the design standard's cure for the "?-swarm"). Two different things cannot
   share one class name; the first click-through caught this collision as a
   44px-wide button with its word spilling out the side, because the token
   sheet was setting width:16px and opacity:0 underneath. That component is
   untouched and still does its job.
   ============================================================================ */

.bc-helpbtn,
a.bc-helpbtn {
  /* the control itself */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* THE TAP LAW — 44px, even when the header around it is denser than that */
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  box-sizing: border-box;

  /* never shove a header's own controls off the edge */
  flex: 0 0 auto;
  align-self: center;

  border-radius: 10px;
  border: 1.5px solid currentColor;
  background: transparent;

  /* borrows the header's own text colour — works light-on-dark and dark-on-light */
  color: inherit;
  text-decoration: none;
  font: 600 15px/1 inherit;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;

  opacity: 0.85;
  transition: opacity .12s ease, background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.bc-helpbtn:hover,
.bc-helpbtn:focus-visible {
  opacity: 1;
  background: rgba(127, 127, 127, .14);
}

.bc-helpbtn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.bc-helpbtn .bc-helpbtn-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: block;
}

.bc-helpbtn .bc-helpbtn-word {
  display: inline;
}

/* ---------------------------------------------------------------------------
   PLACEMENT CLASSES. butler-help.js adds one of these instead of writing a
   style="" attribute — Note Butler and HR Butler send "style-src 'self'" and
   the browser throws inline style attributes away.
   --------------------------------------------------------------------------- */

/* In a flex header where nothing else already claims the leftover room:
   take it, so Help lands at the right-hand end. */
.bc-helpbtn.bc-helpbtn-push { margin-left: auto; }

/* A plain (non-flex) top bar — Safety Butler's hub strip. The bar becomes the
   positioning context and Help pins to its right edge, so nothing already in
   the bar moves a pixel. */
.bc-helpbtn-anchor { position: relative; }

.bc-helpbtn.bc-helpbtn-pinned {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------------------
   THE FALLBACK. Used only when a page has no header this script recognises.
   A floating pill, top-right, clear of the purple sandbox banner, painted so
   it is legible over whatever it happens to sit on.
   --------------------------------------------------------------------------- */
.bc-helpbtn.bc-helpbtn-float {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 38px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 2147483000;
  background: #ffffff;
  color: #0b6bcb;
  border-color: rgba(11, 107, 203, .45);
  box-shadow: 0 2px 10px rgba(23, 28, 34, .18);
  opacity: 1;
}

.bc-helpbtn.bc-helpbtn-float:hover,
.bc-helpbtn.bc-helpbtn-float:focus-visible {
  background: #eaf2fc;
}

@media (prefers-color-scheme: dark) and (min-width:99999px) {
  .bc-helpbtn.bc-helpbtn-float {
    background: #1b2128;
    color: #7fb4f0;
    border-color: rgba(127, 180, 240, .45);
  }
}

/* A page that already runs the Butler tokens gets the exact sanctioned blue. */
.bc-helpbtn.bc-helpbtn-float {
  background: var(--bc-surface, #ffffff);
  color: var(--bc-brand, #0b6bcb);
}

/* ---------------------------------------------------------------------------
   Phones. The word stays — it is the whole point of the control — but the
   padding tightens so the tightest header bars still fit their own contents.
   --------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .bc-helpbtn,
  a.bc-helpbtn {
    padding: 0 10px;
    gap: 6px;
    font-size: 14px;
  }
  .bc-helpbtn .bc-helpbtn-ico { width: 20px; height: 20px; }
}

@media print {
  .bc-helpbtn { display: none !important; }
}