/* Wrapper row for buttons + text (replaces your inline style) */
.pathway-btn {
    display: inline-flex;
    gap: 6px;               /* was 5px inline */
    align-items: center;
    flex-wrap: wrap;        /* nice on tight layouts */
  }
  
  /* Base sheet button */
  .sheet-btn{
    --btn-size: 30px;                                 /* default size 30px */
    --btn-bg: rgba(150,115,166,0.6);                  /* #9673A6 @ 60% */
    --btn-bg-hover: rgba(150,115,166,1);
    --btn-fg: #fff;
    --btn-bd: #fff;
    --btn-radius: 6px;
  
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--btn-size); height:var(--btn-size);
    background:var(--btn-bg);
    color:var(--btn-fg);
    border:1px solid var(--btn-bd);
    border-radius:var(--btn-radius);
    text-decoration:none;
    line-height:1; position:relative; cursor:pointer;
    transition: background .2s ease-in-out, transform .05s ease-in-out;
  }
  
  /* Keep the icon/text white in ALL link states, even with W3.css */
  .sheet-btn,
  .sheet-btn:link,
  .sheet-btn:visited,
  .sheet-btn:hover,
  .sheet-btn:active,
  .sheet-btn:focus {
    color:#fff !important;
    text-decoration:none !important;
  }
  
  /* Hover/active behaviour */
  .sheet-btn:hover { background:var(--btn-bg-hover); }
  .sheet-btn:active { transform: translateY(1px); }
  
  /* Icon via pseudo-element (FA5 Free Solid) */
  .sheet-btn::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px; /* looks right inside 30px */
    content:""; display:block;
  }
  
  /* Icon modifiers */
  .is-up::before       { content:"\f106"; } /* angle-up   */
  .is-down::before     { content:"\f107"; } /* angle-down */
  .is-left::before     { content:"\f104"; } /* angle-left */
  .is-right::before    { content:"\f105"; } /* angle-right */
  .is-question::before { content:"\f128"; } /* question   */
  .is-info::before     { content:"\f05a"; } /* info-circle */
  .is-check::before    { content:"\f00c"; } /* check */
  
  /* Shape variant: circle */
  .sheet-btn--circle   { --btn-radius:50%; }
  
  /* (Optional) quick size variants */
  .sheet-btn--sm { --btn-size:24px; }
  .sheet-btn--lg { --btn-size:36px; }
  .sheet-btn--xl { --btn-size:42px; }
  
  /* ===== Base .sheet-btn already defined above ===== */
  
  /* Transparent (takes parent bg colour) but purple on hover */
  .sheet-btn--transparent {
    --btn-bg: transparent;
    --btn-bg-hover: rgba(150,115,166,1); /* Purple hover */
  }
  
  /* Black */
  .sheet-btn--black {
    --btn-bg: rgba(0,0,0,0.6);
    --btn-bg-hover: rgba(0,0,0,1);
  }
  
  /* Grey */
  .sheet-btn--grey {
    --btn-bg: rgba(102,102,102,0.6);
    --btn-bg-hover: rgba(102,102,102,1);
  }
  
  /* Blue */
  .sheet-btn--blue {
    --btn-bg: rgba(108,142,191,0.6);
    --btn-bg-hover: rgba(108,142,191,1);
  }
  
  
  /* Video buttons */
  .sheet-btn--video {
    --btn-bg: rgba(0,115,170,0.4);
    --btn-bg-hover: rgba(0,115,170,1);
      font-weight: bold;
      font-size: 14px;
  }
  /* NHS Blue */
  .sheet-btn--nhs-blue {
    --btn-bg: rgba(0,94,184,0.6);
    --btn-bg-hover: rgba(0,94,184,1);
  }
  
  /* Green */
  .sheet-btn--green {
    --btn-bg: rgba(130,179,102,0.6);
    --btn-bg-hover: rgba(130,179,102,1);
  }
  
  /* Orange */
  .sheet-btn--orange {
    --btn-bg: rgba(215,155,0,0.6);
    --btn-bg-hover: rgba(215,155,0,1);
  }
  
  /* Yellow */
  .sheet-btn--yellow {
    --btn-bg: rgba(214,182,86,0.6);
    --btn-bg-hover: rgba(214,182,86,1);
  }
  
  /* Pink */
  .sheet-btn--pink {
    --btn-bg: rgba(184,84,80,0.6);
    --btn-bg-hover: rgba(184,84,80,1);
  }
  
  /* Purple */
  .sheet-btn--purple {
    --btn-bg: rgba(150,115,166,0.6);
    --btn-bg-hover: rgba(150,115,166,1);
  }
  /* ---------- ICON VIA <i> SUPPORT (optional) ---------- */
  /* If you place an <i> inside the button, hide the ::before pseudo-icon */
  .sheet-btn.has-icon::before { content: none !important; }
  
  /* Tidy the <i> so it centres perfectly inside the button box */
  .sheet-btn.has-icon > i {
    font-size: calc(var(--btn-size) * 0.6); /* ~18px for 30px btn */
    line-height: 1;
    display: inline-block;
    pointer-events: none; /* clicks go to the button link */
  }
  
  /* Optional: spin animation for loaders */
  .sheet-btn .is-spin,
  .sheet-btn.has-icon .fa-spinner {
    animation: crx-spin 1s linear infinite;
  }
  @keyframes crx-spin { to { transform: rotate(360deg); } }
  
  /* ---------- TEXT MODE (letters/numbers via data-text) ---------- */
  /* Use up to 2 characters; we pull from the data-text attribute */
  .sheet-btn.text-mode::before {
    content: attr(data-text);
    font-family: inherit;       /* not Font Awesome */
    font-weight: 700;
    font-size: calc(var(--btn-size) * 0.55); /* scales with size variants */
    letter-spacing: 0.5px;      /* helps 2-char balance */
  }
  
  /* Ensure text stays centred like icons */
  .sheet-btn.text-mode {
    text-transform: none;       /* keep original casing */
  }
  
  /* Slightly larger text when the badge is circular */
  .sheet-btn.sheet-btn--circle.text-mode::before {
    font-size: calc(var(--btn-size) * 0.60);
    letter-spacing: 0.2px; /* tighter for 2 chars */
  }
  
  /* Optional: stronger outline/ring for a badge look */
  .sheet-btn.badge-outline {
    border-width: 2px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  }
  
  /* Optional: filled + outline hover pop for badges */
  .sheet-btn.badge-outline:hover {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
  }
  
  /* Optional: use tabular numbers so 1/2-digit badges align nicely */
  .sheet-btn.text-mode {
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
  }