/* SSC Companion — web app shortcut banner. In the page flow, so it never covers content. */
.ssc-app {
  --ssc-app-accent: #38402F;
  --ssc-app-on-accent: #F5F5F5;
  background: var(--color-off-white, #F5F5F5);
  color: var(--color-black, #0A0A0A);
  border-bottom: 1px solid var(--color-line-on-light, rgba(10, 10, 10, 0.16));
  font-family: var(--font-family-body, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  animation: ssc-app-in 320ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.ssc-app[hidden], .ssc-app [hidden] { display: none !important; }
.ssc-app__in { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.ssc-app__text { margin: 0; flex: 1 1 auto; min-width: 0; }
.ssc-app__actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ssc-app button {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-none, 0); background: none; color: inherit;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
/* The coloured button is 36px tall inside a 44px touch target. */
.ssc-app .ssc-app__go { position: relative; color: var(--ssc-app-on-accent); padding: 0 14px; z-index: 0; }
.ssc-app .ssc-app__go::before { content: ""; position: absolute; inset: 4px 0; background: var(--ssc-app-accent); z-index: -1; }
.ssc-app .ssc-app__no { color: var(--color-mid-grey, #5F5F5F); font-weight: 500; }
.ssc-app button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.ssc-app__ios { align-items: flex-start; }
.ssc-app__steps { margin: 6px 0; padding-left: 18px; flex: 1 1 auto; list-style: decimal; }
.ssc-app__steps li + li { margin-top: 4px; }
/* Phones: text on its own line, buttons below, so longer button labels never squeeze the text. */
@media (max-width: 600px) {
  .ssc-app__in { flex-wrap: wrap; gap: 0 12px; padding-bottom: 4px; }
  .ssc-app__text { flex-basis: 100%; padding-top: 4px; }
  .ssc-app__actions { gap: 0; flex-wrap: wrap; }
}
@keyframes ssc-app-in { from { max-height: 0; opacity: 0; } to { max-height: 160px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ssc-app { animation: none; } }